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

转载于 2019-09-04 11:02:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

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

本文介绍了一种使用HTML和CSS实现用户头像动画效果的方法。通过定义圆形头像及关键帧动画，使头像周围产生动态阴影效果，增强页面交互体验。

效果：

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