css 实现头像周围光圈动态效果

Macdull2014

于 2019-09-04 11:02:00 发布

阅读量1.4k

点赞数

原文链接：http://www.cnblogs.com/linjiangxian/p/11457719.html

版权

效果：

html文件：

<img class="userHead" src="xx/user.jpg">

css文件：

.userHead{
    width:.3rem;
    height:.3rem;
    border-radius:50%;
    -webkit-animation: ani 2s linear infinite;
}

@keyframes ani {
   0%{
        box-shadow: 0 0 0px #ff8329
   }
   25%{
        box-shadow: 0 0 10px #ff8329
   }
    50%{
        box-shadow: 0 0 20px #ff8329
   }
   75%{
        box-shadow: 0 0 10px #ff8329
   }
   100%{
    box-shadow: 0 0 0px #ff8329
   }
}