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进行滑过时 触发动画