纯CSS3带阴影效果的剪纸文字动画特效

这是一款效果非常炫酷的纯CSS3带阴影效果的剪纸文字动画特效。它利用伪元素来制作文字脱离屏幕的剪纸效果，并在伪元素上执行旋转和缩放，使其在鼠标滑过是产生关门的动画特效。

使用方法

HTML结构

该剪纸文字动画的HTML结构是在<p>元素里放置一组<span>元素，每一个<span>元素是一个字母。其中data-text用于制作伪元素的内容，即向外凸出的文字。

<p aria-label="PeeledText">
  <span data-text="J">J</span>
  <span data-text="Q">Q</span>
  <span data-text="U">U</span>
  <span data-text="E">E</span>
  <span data-text="R">R</span>
  <span data-text="Y">Y</span>
  <span data-text="之">之</span>
  <span data-text="家">家</span>
</p>
              

CSS样式

为了制作3D效果，段落中的span元素都设置了perspective属性。并将transform-style属性设置为preserve-3d。因为IE浏览器不支持这个属性，所以在鼠标滑过文字时不会有动画效果。

p span {
  display: inline-block;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 500;
          perspective: 500;
  -webkit-font-smoothing: antialiased;
}               
              

然后设置span元素的:before和:after伪元素的内容为data-text属性中的内容，并修改它们的转换原点，以及设置动画过渡效果。

p span::before,
p span::after {
  display: none;
  position: absolute;
  top: 0;
  left: -1px;
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: all ease-out 0.3s;
          transition: all ease-out 0.3s;
  content: attr(data-text);
}                
              

span元素的:before伪元素用于制作文字的阴影效果。

p span::before {
  z-index: 1;
  color: rgba(0,0,0,0.2);
  -webkit-transform: scale(1.1, 1) skew(0deg, 20deg);
      -ms-transform: scale(1.1, 1) skew(0deg, 20deg);
          transform: scale(1.1, 1) skew(0deg, 20deg);
}                
              

span元素的:after伪元素用于制作剪纸文字，它使用rotateY函数旋转了-40度，形成向外凸出的效果。

p span:hover::before {
  -webkit-transform: scale(1.1, 1) skew(0deg, 5deg);
      -ms-transform: scale(1.1, 1) skew(0deg, 5deg);
          transform: scale(1.1, 1) skew(0deg, 5deg);
}                
              

最后在鼠标滑过span元素的时候，分别修改:before和:after伪元素的transform属性，使其产生关门的效果。

p span:hover::after {
  -webkit-transform: rotateY(-10deg);
          transform: rotateY(-10deg);
}
p span + span {
  margin-left: 0.3em;
}