html5的出现让我们不用js也可以实现动画效果,先上效果:
当我们把鼠标放上去的时候
字变成了三个,也就成了立体字,其实我们是通过伪元素来创建出与标签内容一样的内容的元素,并让他们叠在一起,当鼠标经过时改变第一层以及最下面一层,来达到立体效果
先写html结构:
<div>
<span data-text="飞">飞</span>
<span data-text="雪">雪</span>
<span data-text="连">连</span>
<span data-text="天">天