Css3做的旋转显示文字和角度的变化-白红宇

Css3做的旋转显示文字和角度的变化

阅读量：7040 次

发布时间：2019-06-28

本文共 1628 字，大约阅读时间需要 5 分钟。

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代码：  
                 
                  
      
            
      
                   
      
                                        
                              
       Heading here
                
       Description goes here

转载于:https://www.cnblogs.com/xinlinux/p/4153686.html

你可能感兴趣的文章