css 圓形動畫

當時給span設置了 border

設置成200px botted

可是在火狐瀏覽器中發現形狀非常奇怪

到後面發現是由於設置了botted  botted未圓點的樣式

改成solid即可以了

而後就是動畫了

@-webkit-keyframes "warn" {  
    0% {  
        -webkit-transform: scale(1.2);  
        opacity: 1.0;  

    }  
    25% {  
        -webkit-transform: scale(1.1);  
        opacity: 0.9;  

        
    }  
    50% {  
        -webkit-transform: scale(1.0);  
        opacity: 0.8;  

        
    }  
    75% {  
        -webkit-transform: scale(1.1);  
        opacity: 0.9;  

        
    }  
    100% {  
        -webkit-transform: scale(1.2);  
        opacity: 1.0;  

        
    }  
}
上面的的代碼是光圈變大變小

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:1px;}
50%  {top:2px;}
75%  {top:1px;}
100% {top:0px;}

}

上面的是圖形輕微的抖動

.circle span{
    border: 200px  solid cornflowerblue;
    border-radius: 50%;
    position: absolute;
    animation:mymove 0.8s infinite;
    -moz-animation:mymove 0.8s infinite; /* Firefox */
width: 200px;
    
}

上面是設置span的樣式以及引用@keyframe設置好的mymove

      
.circle span:hover{
    border-color: cornflowerblue;
    -webkit-animation: warn   1.5s  ease-out infinite;  

      }

當span進行滑過期 觸發動畫