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