幽灵按钮

最新推荐文章于 2022-07-18 15:25:20 发布

大大大v

最新推荐文章于 2022-07-18 15:25:20 发布

阅读量331

点赞数

文章标签： web 界面

本文链接：https://blog.csdn.net/yymonkeydo/article/details/78782402

版权

web前端界面专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这个有bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幽灵按钮</title>
    <link type="text/css" rel="stylesheet" href="css/style1.css">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div class="box">
        <div class="link link-miss">
            <span class="icon"></span>
            <a href="#" class="button" data="My mission is clear">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                MISSION
            </a>
        </div>
        <div class="link link-play">
            <span class="icon"></span>
            <a href="#" class="button" data="This is my playGroup">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                PLAY
            </a>
        </div>
        <div class="link link-touch">
            <span class="icon"></span>
            <a href="#" class="button" data="This is my touch">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                TOUCH
            </a>
        </div>
        <div class="tip"><em></em><span></span></div>
    </div>
span是内联元素，display:inline-block 内联元素 可以设定宽<br/>
span设定background，设定背景图居中center center<br/>
鼠标滑过的时候，三个图片都是一样的动画，所以，动画放在link:hover中<br/>
鼠标滑过的icon  link .icon:hover<br/><br/>
Transform 定义和用法<br/>
    transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。<br/>
rotate(angle)旋转<br/>
scale缩放<br/>
兼容性：IE10 Opera支持transform<br/>
IE9 -ms-transform<br/>
Safari和Chrome支持-webkit-transform<br/>
Opera只支持2D转换<br/>
FF -moz-transform<br/>
要让动画有效果，需要Transition属性<br/>
transition属性时一个简写属性，用于设置四个过渡属性：<br/>
transition-property、transition-duration、transition-timing-function、transition-delay<br/>
语法：
transition:property duration timing-function delay;<br/>
<li>transition-property:规定设置过渡效果的CSS属性的名称    过渡宽 transition:width 或 transition-property:width</li>
<li>transition-duration:规定完成过渡效果需要多少秒毫秒</li>
<li>transition-timing-function:规定速度效果的速度曲线  ease-out减速 ease慢动作开始变快又变慢</li>
<li>transition-delay:定义过渡效果何时开始</li>
<br/><br/>
box-sizing:border-box;如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。<br/>
    opacity:0;透明度0<br/>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

css:

*{margin:0;
padding:0}
body{background:#333;}
.box{width:800px;
    height:280px;
    margin:50px auto;
    position: relative;
}
.box .link{
    width:205px;
    height:280px;
    float:left;
    margin:0 20px;
}
.link .icon{
    display:inline-block;
    width:100%;
    height:190px;
    transition:0.2s ease-out;
    -moz-transition:0.2s ease-out;
    -webkit-transition:0.2s ease-out;
    -o-transition:0.2s ease-out;
}
.link-miss .icon{background:#f00 url("../images/mission.png") no-repeat center center;}
.link-play .icon{background:url("../images/play.png") no-repeat center center}
.link-touch .icon{background:url("../images/touch.png") no-repeat center center}
.link .icon:hover{transform:rotate(360deg) scale(1.2);
    -ms-transform:rotate(360deg) scale(1.2);
    -moz-transform:rotate(360deg) scale(1.2);
    -webkit-transform:rotate(360deg) scale(1.2);
    -o-transform:rotate(360deg) scale(1.2);}
.button{
    display: block;
    width:180px;
    height:50px;
    line-height:50px;
    text-decoration:none;
    position: relative;
    color:#2DCB70;
    font-weight:bolder;
    border:2px solid rgba(255,255,255,0.8);
    padding-left:20px;
    margin:0 auto;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    -moz-box-sizing:border-box;
    background: url("../images/allow.png") no-repeat 130px center;
    transition:0.4s ease;
    -moz-transition:0.4s ease;
    -webkit-transition:0.4s ease;
    -o-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;
    -moz-transition:0.4s ease;
    -webkit-transition:0.4s ease;
    -o-transition:0.4s ease;
}
.button:hover .line{background:#FFF;}

.button .line-top{
    height: 2px;
    width: 0;
    left: -110%;
    top: -2px;
}
.button:hover .line-top{
    width:100%;
    left:-2px;
}
.button .line-right{
    width:2px;
    height: 0;
    top:-110%;
    right:-2px;
}
.button:hover .line-right{
    height:100%;
    top:-2px;
}
.button .line-bottom{
    height: 2px;
    width: 0;
    right: -110%;
    bottom: -2px;
}
.button:hover .line-bottom{
    width: 100%;
    right: -2px;
}
.button .line-left{
    width: 2px;
    height: 0;
    bottom: -110%;
    left: -2px;
}
.button:hover .line-left{
    height: 100%;
    bottom: -2px;
}

.tip{
    position:absolute;
    padding:0 14px;
    height:35px;
    line-height: 35px;
    background:#2DCB70;
    color:#FFF;
    font-size: 18px;
    margin: 0 auto;
    border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    top: 100px;
    opacity:0;
}
.tip em{
    font-style: normal;
}
.tip span{
    display:block;
    width:0;
    height:0;
    overflow: hidden;
    border:7px solid transparent;
    border-top-color: #2DCB70;
    position: absolute;
    top:35px;
    left:50%;
    margin-left: -7px;
}

js:

$(function(){
    $('.link .button').hover(function(){
        var title = $(this).attr('data');
        $('.tip em').text(title);
        var pos = $(this).position().left + 12;
        var dis=($('.tip').outerWidth()-$(this).outerWidth())/2;
        var l =pos-dis;
        document.title = dis;
        $('.tip').css({'left':l+'px'}).stop(true,false).animate({'top':140,'opacity':1},300);
    },function(){
        $('.tip').stop(true,false).animate({'top':100,'opacity':0},500);
    })
});