html5: 幽灵按钮

最新推荐文章于 2021-06-24 17:21:57 发布

weixin_34202952

最新推荐文章于 2021-06-24 17:21:57 发布

阅读量237

点赞数

原文链接：http://www.cnblogs.com/Nyan-Workflow-FC/p/10700184.html

版权

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: 0;
    padding: 0;
}

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: 0;
    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: 0;
}

.tip em{
    font-style: normal;
}
/*下三角定义，通过border上，下，左，右显示一部分颜色实现*/
.tip span{
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    border: 7px solid transparent;
    border-top-color: #2DCB70;
    left: 50%;
    margin-left: -3px;
    bottom: -14px;
}