旋转的css3源代码

<!doctype html>
<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<style type=”text/css”>
.demo2, .img, .mask, .border{
width: 300px;
height:300px;
border-radius:50%;
position: relative;
}

.demo2{
position: relative;
display:block

}

.img {
background-size:cover;
background-position:50% 50%;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
}
.mask, .border{

position:absolute;
left:0;
top:0;
}
.mask {
text-align:center;
color:rgba(255,255,255,0);
transition:all 1.5s ease-in;
}
.info{
margin-top:50%;
transform:translateY(-50%);
}

.demo2:hover .mask {
background-color:rgba(0,0,0,0.8);
color:rgba(255,255,255,1);
}

.demo2:hover .border{
transform:rotate(180deg);
}
.demo2:hover .img{
-webkit-transform:scale(1.1) rotate(360deg);
-moz-transform:scale(1.1) rotate(720deg);
-o-transform:scale(1.1) rotate(360deg);
}
.demo2:hover .border{
-webkit-transform:scale(1.1) rotate(360deg);
-moz-transform:scale(1.1) rotate(360deg);
-o-transform:scale(1.1) rotate(360deg);
}

.border{
border:10px solid #9f0;
border-left-color:#0f6;
border-top-color:#0f6;
box-sizing:border-box;
transition:all 1.5s ease-in;
}

.demo2:hover .border{
border:20px solid #f09;
border-left-color:#60f;
border-top-color:#60f;
}

.play, .img, .border{
transition:all 2s ease-in;
}
.demo2:hover .play{
-webkit-transform:scale(2) ;
-moz-transform:scale(2) ;
-o-transform:scale(2) ;
}
</style>
</head>

<body>

<a href=”http://player.youku.com/embed/XMTUzNDc0MTEwMA==” class=”demo2 popup”>
<div class=”img” style=”background-image:url(http://fishingmlf.com/wp-content/uploads/2016/03/finshingmlf-logo.png)”></div>
<div class=”mask” >
<div class=”info”>

<img class=”play” src=”http://www.icosky.com/icon/png/Media/Play%20Stop%20Pause/Play%20Hot.png” width=”80px”>
</div>
</div>
<div class=”border”> </div>
</a>

</body>

</html>

,

关注微信公众号

菜单