Css3做的旋转显示文字和角度的变化
![](http://images0.cnblogs.com/blog/638386/201412/091705134626134.jpg)
Css:
.spinner{
width:245px;
height:245px;
position:relative;
}
.coly{
border-radius:130px;
font-size:19px;
background:#333;
border:10px solid #ecab18;
border-right-color:#1ad280;
border-bottom-color:#1ad280;
width:230px;
height:230px;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.imgT{
position:absolute;
top: 10px;
left: 10px;
border-radius:120px;
width:230px;
overflow: hidden;
height:230px;
}
.spinner:hover .coly{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.info-back{
opacity: 0;
display: block;
width: 100%;
position:absolute;
top:0;
color:#fff;
height: 100%;
text-align: center;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.info-back:hover{
opacity:1;
}
.info-back h3{
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 55px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.info-back p{
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
html代码:
<div class="spinner"> <div class="coly"> </div> <div class="imgT"> <img src="http://www.gbtags.com/gb/networks/uploads/0f8c4c4d-f612-4476-bfa4-fa49a461fb08/ihover-gh-pages/dist/images/assets/2.jpg"/> </div> <div class="info-back"> <h3>Heading here</h3> <p>Description goes here</p> </div> </div>