模仿input闪烁光标

模仿闪烁的光标

<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