HTML5新增属性来实现立体字效果

html5的出现让我们不用js也可以实现动画效果，先上效果：

当我们把鼠标放上去的时候
字变成了三个，也就成了立体字，其实我们是通过伪元素来创建出与标签内容一样的内容的元素，并让他们叠在一起，当鼠标经过时改变第一层以及最下面一层，来达到立体效果

先写html结构：

<div>
        <span data-text="飞">飞</span>
        <span data-text="雪">雪</span>
        <span data-text="连">连</span>
        <span data-text=