css 圆形动画

最新推荐文章于 2025-02-15 23:16:26 发布

转载最新推荐文章于 2025-02-15 23:16:26 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jiangyou-lz/p/7340320.html

本文介绍了解决HTML中span元素设置宽边框时在火狐浏览器显示异常的方法，并给出了实现元素缩放及抖动动画的具体CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/jiangyou-lz/p/7340320.html