開口アバターの周りの動的効果を達成するためのCSS

効果：

 

htmlファイル：

<IMGクラス= "userHead" SRC = "XX / user.jpg">    

CSSファイル：

.userHead { 
    幅：.3rem。
    高さ：.3rem。
    ボーダー -radius：50％;
    -webkit- アニメーション：ANI 2Sは無限線形。
} 

@keyframes ANI {
    0％{ 
        ボックス -shadow：0 0PX＃1 ff8329 
   }
    25％{ 
        ボックス -shadow：0 10pxの＃1 ff8329 
   }
     50％{ 
        ボックス -shadow：0 0 20ピクセル＃1 ff8329 
   }
    75％{ 
        ボックス -shadow ：0 0 10pxの＃1 ff8329 
   }
    100％{ 
    ボックス -shadow：0 0PX＃1 ff8329
   } 
}