html:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <!--

     主要知识点：

     1.transform 事件发生后需要变的样子

     2.transition 主体样式中定义

     3.box-sizing

     4.border-radius

    -->

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="jquery-2.1.1.min.js"></script>

</head>

<body>

    <div class="box">

        <div class="link link-miss">

            <span class="icon"></span>

            <a href="#" class="button" data-title="My mission is clear">

                <span class="line line-top"></span>

                <span class="line line-left"></span>

                <span class="line line-right"></span>

                <span class="line line-bottom"></span>

                MISSION

            </a>

        </div>

        <div class="link link-play">

            <span class="icon"></span>

            <a href="#" class="button" data-title="This is my palyground">

                <span class="line line-top"></span>

                <span class="line line-left"></span>

                <span class="line line-right"></span>

                <span class="line line-bottom"></span>

                MISSION

            </a>

        </div>

        <div class="link link-touch">

            <span class="icon"></span>

            <a href="#" class="button" data-title="Lets do something together">

                <span class="line line-top"></span>

                <span class="line line-left"></span>

                <span class="line line-right"></span>

                <span class="line line-bottom"></span>

                MISSION

            </a>

        </div>

        <div class="tip">

            <em></em>

            <span></span>

        </div>

    </div>

    <script>

        $(function(){

            $(".link .button").hover(function(){

                var title = $(this).attr("data-title");

                $(".tip em").text(title);

                var pos= $(this).offset().left;

                var dis = ($(".tip").outerWidth()-$(this).outerWidth())/2;

                var f = pos-dis;
　　　　　　　　　　//从top195 -> 160变化

                $(".tip").css({"left":f+"px"}).animate({"top":195,"opacity":1},300);

            },function(){
　　　　　　　　　　//鼠标移出回到本来的样式

              $(".tip").animate({"top":160,"opacity":0},300);

            })

        })

    </script>

</body>

</html>

css:

*{

    margin:;

    padding:;

}

body{

    background: #333;

}

.box{

    width: 1000px;

    height: 280px;

    margin: 50px auto;

}

.box .link{

    width: 205px;

    height: 280px;

    margin: 0 20px;

    float: left;

    position: relative;

}

/*

Transition

•定义和用法

•transition 属性是一个简写属性，用于设置四个过渡属性：

•transition-property

•transition-duration

•transition-timing-function

•transition-delay

•语法

•transition: property duration timing-function delay;

•值描述

•transition-property规定设置过渡效果的 CSS 属性的名称。

•transition-duration规定完成过渡效果需要多少秒或毫秒。

•transition-timing-function规定速度效果的速度曲线。

•transition-delay定义过渡效果何时开始(延时执行时间)。

•浏览器支持

•Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

•Safari 支持替代的 -webkit-transition 属性。

•注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。*/

/*span属于内敛元素，不具备宽高，使用display属性显示*/

.link .icon{

    display: inline-block;

    width: 100%;

    height: 190px;

    transition: 0.2s linear;

    -webkit-transition: 0.2s linear;

    -o-transition: 0.2s linear;

    -moz-transition: 0.2s linear;

    -ms-transition: 0.2s linear;

}

.link-miss .icon{

    background:url("mission.png") no-repeat center center;

}

.link-play .icon{

    background: url("play.png") no-repeat center center;

}

.link-touch .icon{

    background: url("touch.png") no-repeat center center;

}

/*Transform

•定义和用法

•transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

•rotate(angle )定义 2D 旋转，在参数中规定角度

•rotateX(angle)定义沿着 X 轴的 3D 旋转。

•rotateY(angle)定义沿着 Y 轴的 3D 旋转。

•rotateZ(angle)定义沿着 Z 轴的 3D 旋转。

•scale(x,y)定义 2D 缩放转换。

•scale3d(x,y,z)定义 3D 缩放转换。

•scaleX(x)通过设置 X 轴的值来定义缩放转换。

•scaleY(y)通过设置 Y 轴的值来定义缩放转换。

•scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。

•浏览器支持

•Internet Explorer 10、Firefox、Opera 支持 transform 属性。

•Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

•Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

•Opera 只支持 2D 转换。

*/

/*.link:hover .icon*/

.link .icon:hover{

    transform: rotate(360deg) scale(1.2);

    -ms-transform: rotate(360deg) scale(1.2);

    -webkit-transform: rotate(360deg) scale(1.2);

    -o-transform: rotate(360deg) scale(1.2);

    -moz-transform: rotate(360deg) scale(1.2);

}

/*

•box-sizing

•定义和用法

•box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。

•语法

•box-sizing: content-box|border-box|inherit

•值描述

•content-box

•宽度和高度分别应用到元素的内容框。

•在宽度和高度之外绘制元素的内边距和边框。

•border-box

•为元素设定的宽度和高度决定了元素的边框盒。

•就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

•通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

•inherit  规定应从父元素继承 box-sizing 属性的值。

•浏览器支持

•Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

•Firefox 支持替代的 -moz-box-sizing 属性。*/

.button{

    display: block;

    width: 180px;

    height: 50px;

    text-decoration: none;

    line-height: 50px;

    color:#2DCB70;

    font-family: "微软雅黑", Arial, Helvetica, sans-serif;

    font-weight: bolder;

    border: 2px solid rgba(255,255,255,0.8);

    padding-left: 20px;

    margin: 0 auto;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    background: url("allow.png") no-repeat 130px center;

    position: relative;

    transition: 0.4s ease;

    -webkit-transition: 0.4s ease;

    -o-transition: 0.4s ease;

    -moz-transition: 0.4s ease;

    -ms-transition: 0.4s ease;

}

.button:hover{

    border: 2px solid rgba(255,255,255,1);

    background-position: 140px center;

}

.button .line{

    display: block;

    position: absolute;

    background: none;

    transition: 0.4s ease;

    -webkit-transition: 0.4s ease;

    -o-transition: 0.4s ease;

    -moz-transition: 0.4s ease;

    -ms-transition: 0.4s ease;

}

.button:hover .line{

    background: #fff;

}

/*

 top:

  1.高度不变

  2.宽度变（0-盒子的宽度）

  3.位置：左-右

*/

.button .line-top{

    height: 2px;

    width: 0px;

    left: -110%;

    top: -2px;

}

.button:hover .line-top{

    width: 100%;

    left: -2px;

}

.button .line-bottom{

    width: 0px;

    height: 2px;

    right: -110%;

    bottom: -2px;

}

.button:hover .line-bottom{

    width: 100%;

    right: -2px;

}

.button .line-left{

    width: 2px;

    height:;

    left: -2px;

    bottom: -110%;

}

.button:hover .line-left{

    height: 100%;

    bottom: -2px;

}

.button .line-right{

    width: 2px;

    height: 0px;

    right: -2px;

    top: -110%;

}

.button:hover .line-right{

    height: 100%;

    top: -2px;

}

.box .tip{

    position: absolute;

    padding: 0px 14px;

    height: 35px;

    line-height: 35px;

    background: #2DCB70;

    color: #fff;

    top: 160px;

    font-size: 16px;

    font-weight: normal;

    text-transform: none;

    margin: 0 auto;

    border-radius: 3px;

    opacity:;

}

.tip em{

    font-style: normal;

}

/*下三角定义，通过border上，下，左，右显示一部分颜色实现*/

.tip span{

    position: absolute;

    width:;

    height:;

    overflow: hidden;

    border: 7px solid transparent;

    border-top-color: #2DCB70;

    left: 50%;

    margin-left: -3px;

    bottom: -14px;

}

html5: 幽灵按钮的更多相关文章

  1. 听着好像很牛的特效——幽灵按钮DOM

    给大家分享一个听着好像很牛的东西——幽灵按钮,这个玩意对于艺术设计细胞在高中决定不在考试试卷上画画的我来说,实在不感冒.但是这个按钮的设计元素很流行,一个网页东西不做几个,光放上几个按钮就会显得很高端 ...

  2. 巧用HTML5给按钮背景设计不同的动画

      如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3   animation 来动画   background-size  和  background-posit ...

  3. html5 渐变按钮练习

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 纯css3实现的幽灵按钮导航

    之前为大家介绍了好几款导航菜单,今天再给大家带来一款css3实现的幽灵按钮式的导航菜单.导航界面非常好看.右侧是一个css3实现的动画消息图标.效果图如下: 在线预览   源码下载 实现代码: htm ...

  5. 自己动手画一个HTML5的按钮

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...

  7. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  8. [UWP]浅谈按钮设计

    一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不 ...

  9. Flash生成HTML5动画方法

      方法一:利用“swiffy”将Flash转换成HTML5动画. 首先,我们需要下载一款基于“Flash”程序的插件,名称为“swiffy”,这是一款由谷歌推出的一个Flash扩展,可以通过“Fla ...

随机推荐

  1. Please check registry access list (whitelist/blacklist)

    https://blog.csdn.net/sprita1/article/details/51735566

  2. The type javax.http.HttpServletRequest cannot be resolved.It is indirectly 解决办法

    原因:项目中缺少servlet-api.jar文件. 解决办法:将E:\tomcat\apache-tomcat-6.0.24\lib下的servlet-api.jar拷贝到项目中,然后编译即可.(根 ...

  3. 关于MVC 中EF调用存储过程

    Entity Framework 4.3 中使用存储过程 分类:ASP.NET MVC 3, ASP.NET                  0                   尽管 Entit ...

  4. linux 安装vscode

    滚动安装vscode 需要先添加源,然后install 以centos为例: sudo rpm --import https://packages.microsoft.com/keys/microso ...

  5. Android执行shell命令 top ps

    Android执行shell命令 一.方法 /** * 执行一个shell命令,并返回字符串值 * * @param cmd * 命令名称&参数组成的数组(例如:{"/system/ ...

  6. Maven项目mybatis Invalid bound statement (not found)解决方法

    最近因为工作需要,要学习mybatis框架.在添加好一些依赖之后,通过mybatis进行数据库的crud操作.但是在测试的时候总是报mybatis:Invalid bound statement (n ...

  7. JAVA基础补漏--SET

    HashSet: 1.无序集合. 2.底层是一个哈希表结构,查询速速很快. 哈希表==数据 + 链表/红黑树 特点:查询速度快. 存储数据到SET中: 1.计算数据的HASH值. 2.查看有没有相同H ...

  8. 数据结构实习 problem L 由二叉树的中序层序重建二叉树

    由二叉树的中序层序重建二叉树 writer:pprp 用层序中序来重建二叉树 代码点这里 其实本质上与前序中序建立二叉树没有什么太大区别 大概思路: 递归解法,对当前层进行处理,通过层序遍历可以得到当 ...

  9. linux中的&&和&，|和||

    在linux中,&和&&,|和||介绍如下: &  表示任务在后台执行,如要在后台运行redis-server,则有  python a.py & && ...

  10. centos下搭建DNS

    一.DNS名词介绍: ( Domain Name System )是“域名系统”的英文缩写 正向解析:通过域名查找IP 反向解析:通过IP查找域名 二.安装BIND: BIND即Berkeley In ...