Slogan
Home > CSS

css3模拟光标动画

CSS3 模拟光标的动画


.input-label::before {
  float: right;
  content: " ";
  background-color: #ff4e58;
  letter-spacing: 0.88px;
  width: 2px;
  height: 26px;
  animation: cursor-blinks 1.5s infinite steps(1, start);
}

@keyframes cursor-blinks {
  0% {
    opacity: 1;
    display: block;
  }
  50% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

上一篇:css input[type=file] 样式美化,input上传按钮美化
下一篇:CSS 隐藏 IE input 文本框的叉叉(X)和密码输入框的眼睛图标