主要是看了这个 https://www.firecode.io/ 的效果,再加上之前 http://npmjs.org/也有类似的效果,就试着动手自己实现了下。
先上效果图吧:
演示地址:http://justforuse.github.io/print-literally/demo.html
可以看出主要由三部分组成:左侧的静态文本,中部的变化文本,右侧的闪烁光标。
左边的部分自然不用说,直接设置就好;右侧的闪烁光标可以使用CSS3中的animation属性来为“|”添加一个动画,具体代码如下:
<style>
.cursor {
opacity: 1<