幽灵按钮 







<!DOCTYPE html>
    <html lang="en">
    <head>
    
        <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
        <title>幽灵按钮</title>
    
    
        <link rel="stylesheet" type="text/css" href="styleq.css"/>
    </head>
    <body>
    
    
    <div class="content">
    
        <div class="box box-mission">
            <span class="icon"></span>
            <a href="#"class="button">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                资金安全
            </a>
        </div>
        <div class="box box-play">
            <span class="icon"></span>
            <a href="#"class="button">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                闪电交易
            </a>
        </div>
        <div class="box box-touch">
            <span class="icon"></span>
            <a href="#"class="button">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                灵活融资
            </a>
        </div><div class="box box-name">
        <span class="icon"></span>
        <a href="#"class="button">
            <span class="line line-top"></span>
            <span class="line line-right"></span>
            <span class="line line-bottom"></span>
            <span class="line line-left"></span>
            贴心管家<br>
    
        </a>
    </div>
    
    
    </div>
    </body>
    </html>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    




 




 




*{
    margin: 0;
    padding: 0;
}

body{

    background: mediumvioletred;

}
.content{

    width: 1000px;
    height:800px;

    margin: 80px auto;
}
@media screen and (min-width:980px){
    .content .box{
        width: 160px;
        height: 200px;
        margin:0px 40px;
        float:left ;
    }
}
@media screen and (min-width:600px){
    .content .box{
        width: 160px;
        height: 200px;

    }
}
.box-mission .icon{
    display:block;
    width:115px;
    height:111px;
    background: url(./images/a.png) no-repeat;
    margin: 0px auto;
    transition:all 0.2s;
    -webkit-transition:all 0.2s;
    -o-transition:all 0.2s;
    -moz-transition:all 0.2s;
}

.box-play .icon{
    display:block;
    width:115px;
    height:111px;
    background: url(./images/b.png) no-repeat;
    margin: 0px auto;
    transition:all 0.2s;
    -webkit-transition:all 0.2s;
    -o-transition:all 0.2s;
    -moz-transition:all 0.2s;
}
.box-touch .icon{
     display:block;
     width:115px;
     height:111px;
     background: url(./images/c.png) no-repeat;
     margin: 0px auto;
     transition:all 0.2s;
     -webkit-transition:all 0.2s;
     -o-transition:all 0.2s;
     -moz-transition:all 0.2s;
 }

.box-name .icon{
    display:block;
    width:115px;
    height:111px;
    background: url(./images/d.png) no-repeat;
    margin: 0px auto;
    transition:all 0.5s;
    -webkit-transition:all 0.2s;
    -o-transition:all 0.2s;
    -moz-transition:all 0.2s;
}
.box-mission .icon:hover{

    transform:scale(1.2) rotate(360deg);
    -webkit-transform:scale(1.2) rotate(360deg);//谷歌浏览器
    -o-transform:scale(1.2) rotate(360deg); //苹果浏览器
    -moz-transform:scale(1.2) rotate(360deg);//火狐浏览器
}
.box-play .icon:hover{

    transform:scale(1.2) rotate(360deg);
    -webkit-transform:scale(1.2) rotate(360deg);//谷歌浏览器
    -o-transform:scale(1.2) rotate(360deg); //苹果浏览器
    -moz-transform:scale(1.2) rotate(360deg);//火狐浏览器
}

.box-touch .icon:hover{

    transform:scale(1.2) rotate(360deg);
    -webkit-transform:scale(1.2) rotate(360deg);//谷歌浏览器
    -o-transform:scale(1.2) rotate(360deg); //苹果浏览器
    -moz-transform:scale(1.2) rotate(360deg);//火狐浏览器
}

.box-name .icon:hover{

    transform:scale(1.2) rotate(360deg);
    -webkit-transform:scale(1.2) rotate(360deg);//谷歌浏览器
    -o-transform:scale(1.2) rotate(360deg); //苹果浏览器
    -moz-transform:scale(1.2) rotate(360deg);//火狐浏览器
}

.box .button{
    display: block;
    width:156px;
    height:45px;
    line-height: 45px;
    margin: 20px auto;
    background:url(./images/01.png) no-repeat 100px center;
   font-family: "微软雅黑";
    font-weight: bolder;
    color: #2ecc71;
    text-decoration: none;
    padding-left: 20px;
    border:2px solid rgba(255,255,255,0.8);

    transition: all 0.2s ease;
    position: relative;
}

.box .button:hover{

    background-position: 140px center;
   border:2px solid rgba(255,255,255,1);
}

.box .line{
    background-color:red;

}

.box .line-top{

    width:0px;
    height:2px;
    display: block;
    position:absolute;
    top:-2px;
    left:-60px;
    transition: all 0.2s ease;
}
.box .button:hover .line-top{
    width:180px;
    left:-2px;
}

.box .line-bottom{

    width:0px;
    height:2px;
    display: block;
    position:absolute;
    bottom:-2px;
    right: -60px;

    transition: all 0.2s ease;
}
.box .button:hover .line-bottom{
    width:180px;
    left:-2px;
}

.box .line-left{

    width:2px;
    height:0px;
    display: block;
    position:absolute;
    bottom:-60px;
    left:-2px;
    transition: all 0.2s ease;
}
.box .button:hover .line-left{
   height:49px;
   bottom:-2px;


}



.box .line-right{

    width:2px;
    height:0px;
    display: block;
    top:-60px;
    position:absolute;
    right:-2px;

    transition: all 0.2s ease;
}
.box .button:hover .line-right{
    height: 49px;
    top:-2px;

}




 






        

            posted on 
2017-04-25 08:45 
奔跑的葛根 
阅读(163) 
评论(0) 
 
收藏 
举报

        

    











    
    

    
    

    

        

    

        

            
                
                
            
        

    

    
    

    

    





	






	
		
		

导航