纯CSS3炫酷3D浮雕质感文字动画特效

这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效。该特效中文字被制作为浮雕文字，就像是从一块石板上将文字雕刻下来的一样。而且文字还会来回的摆动旋转，效果非常好。

制作方法

HTML结构

该CSS3文字特效的HTML结构是在一个<div>容器中放置20个空的<div>层制作出来的，本身并没有使用任何的文字。

<div class='stage'>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
  <div class='layer'></div>
</div>          
              

CSS样式

首先包裹容器.stage使用perspective属性来制作为3D空间。

.stage {
  height: 300px;
  width: 500px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  perspective: 9999px;
  transform-style: preserve-3d;
}           
              

每一个DIV层使用transform-style: preserve-3d;来使其具有立体感。由于IE浏览器不支持这个属性，所以看起来是平面的。同时他们还执行了一个CSS3 animation动画。

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  opacity: 0;
  animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1;
  animation-fill-mode: forwards;
  transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}                
              

真正的文字是使用.layer:after伪元素来制作的。

.layer:after {
  font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif;
  content: 'Pure\A    css!';
  white-space: pre;
  text-align: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50px;
  color: whitesmoke;
  letter-spacing: -2px;
  text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}                
              

最后，特效中为每一个层绕Z轴旋转一个指定的角度，并为指定的层添加阴影效果，使其具有立体感。

.layer:nth-child(1):after {
  transform: translateZ(0px);
}

.layer:nth-child(2):after {
  transform: translateZ(-2px);
}
...
.layer:nth-child(n+10):after {
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11):after {
  -webkit-text-stroke: 15px dodgerblue;
  text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}

.layer:nth-child(n+12):after {
  -webkit-text-stroke: 15px #0077ea;
}

.layer:last-child:after {
  -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}

.layer:first-child:after {
  color: #fff;
  text-shadow: none;
}