幽灵按钮

来源：互联网发布：coure crt软件编辑：程序博客网时间：2024/06/09 14:21

这个有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);    })});

阅读全文

0 0