模仿input闪烁光标

最新推荐文章于 2022-02-15 10:57:16 发布

weixin_30609287

最新推荐文章于 2022-02-15 10:57:16 发布

阅读量2.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lengyue0030/p/10241290.html

版权

模仿闪烁的光标

<span class="cursor-blink">&nbsp;</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，需要的小伙伴可以试试

仅做参考

转载于:https://www.cnblogs.com/lengyue0030/p/10241290.html