模仿input闪烁光标
模仿闪烁的光标
<span class="cursor-blink"> </span>
样式代码:
.cursor-blink {
display: inline-block;
width: 1px;
animation: blink 1s infinite steps(1, start);
}
/*这里设置动画blink*/
@keyframes blink {
0%, 100% {
background-color: #000;
color: #aaa;
}
50% {
background-color: #bbb; /* not #aaa because it's seem there is Google Chrome bug */
color: #000;
}
}
占半个字符,闪烁起来有点大,命令工具闪烁,所以加一个宽度
根据场景需要,可以用伪类实现,::bdefore或者::after,需要的小伙伴可以试试
仅做参考
posted on 2019-01-08 20:34 lengyue0030 阅读(1319) 评论(1) 编辑 收藏 举报