css 圆形动画

时间 2019-11-11

标签 css 圆形动画栏目 CSS 繁體版

原文原文链接

当时给span设置了 borderweb

设置成200px botted浏览器

可是在火狐浏览器中发现形状非常奇怪动画

到后面发现是由于设置了botted botted未圆点的样式spa

改成solid即可以了code

而后就是动画了orm

@-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;}

}

上面的是图形轻微的抖动blog

.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设置好的mymoveci

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

      }

当span进行滑过期触发动画animation