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

PetitQ 文本/链接 2019-1-21 1.79K 0 0

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

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

已有 447 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

文本/链接

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

HTML 结构

CSS 样式

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

相关文章

jQuery文字长阴影特效插件

jQuery文字动画特效插件

CSS3 伪元素制作字母卡片开关门3D效果

发表回复取消回复

热销模板

文本/链接

HTML 结构

CSS 样式

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复