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

结构:

      <span class="wrapper">
            <img src="">
      </span>

动效:

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

 

Logo

分享最新的 NVIDIA AI Software 资源以及活动/会议信息,精选收录AI相关技术内容,欢迎大家加入社区并参与讨论。

更多推荐