美文网首页
css实现头像周围光圈动态效果

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

作者: 前端召唤师 | 来源:发表于2019-06-11 14:42 被阅读0次

    效果:


    image.png

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

    相关文章

      网友评论

          本文标题:css实现头像周围光圈动态效果

          本文链接:https://www.haomeiwen.com/subject/qzkqfctx.html