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

当前位置:主页 > CSS3库 > CSS3动画 > 纯CSS3炫酷3D浮雕质感文字动画特效
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
纯CSS3炫酷3D浮雕质感文字动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-18
    阅读:
简要教程

这是一款效果非常酷的纯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;
}                
              

网友评论