lengyue0030

导航

模仿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;
            }
        }

&nbsp;占半个字符,闪烁起来有点大,命令工具闪烁,所以加一个宽度

根据场景需要,可以用伪类实现,::bdefore或者::after,需要的小伙伴可以试试

仅做参考

 

posted on 2019-01-08 20:34  lengyue0030  阅读(1319)  评论(1编辑  收藏  举报