利用css3中的animation来模拟input中的光标闪烁动效

需求:实现鼠标点击这个横线的时候,左侧的蓝色条模拟input中的光标闪烁。

结构:

      
            
      

动效:

img{
  animation:cursorImg 1s infinite steps(1, start);
          @keyframes cursorImg {
            0%, 100% {
             opacity: 0;
            }
            50% {
             opacity: 1;
            }
          }
}

 

你可能感兴趣的:(利用css3中的animation来模拟input中的光标闪烁动效)