如何用 css 模拟闪烁的鼠标
访问 http://segmentfault.com/2014 后看到终端字符界面，立马眼前一亮，实在是太有情怀了，太会装逼了... gaga
那么问题来了，闪烁的光标是如何实现的呢？
下面是我的代码，可惜不闪！
.cursor, .cursor-blink {
background-color: red;
color: #000;
}
.cursor-blink {
animation: 1s steps(1, start) 0s normal none infinite running blink;
}
<span class="cursor-blink"><span>
展开
收起
1
条回答
写回答
写回答
-
sf的光标闪烁用到了jQuery.terminal，可以直接把它用到自己的网页中。
至于具体实现原理，则用到了CSS3的动画。部分源代码如下：/这里是闪烁光标/
.cursor.blink {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; }}
当然，因为CSS3动画还没有成为正式的标准，所以也需要加浏览器私有前缀。2019-07-17 19:16:31赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
