如何用 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>
不停飘来飘去
10 years, 9 months ago
Answers
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动画还没有成为正式的标准，所以也需要加浏览器私有前缀。
补充说明一下吧，如果需要兼容旧浏览器的话，可能CSS就有点捉襟见肘了，此时可以改用JS，不断修改元素的style.backgroundColor即可。
红脖子微笑动画
answered 10 years, 9 months ago