js+css炫酷3D立体卡通文字特效

PetitQ 文本/链接 2018-11-09 2.94K 0 0

这是一款效果使用纯 js 和 CSS3 制作的炫酷 3D 立体卡通文字特效。该特效通过 js 代码来克隆字母的内容，并通过 CSS text-shadow 属性和 transform 属性将字母渲染为 3D 立体效果。

HTML 结构：

该 3D 立体文字特效的 HTML 代码非常简单，使用一个[div]来包裹文字即可。

也想出现在这里？联系我们吧

```
<div class="wrapper">
```
```
  <div class="content">
```
```
    Alphabet Magnet Text Styling
```
```
  </div>
```
```
</div>
```

CSS 样式：

该 3D 立体文字特效的 CSS 代码如下：

```
.content {
```
```
  font-family: 'Rubik';
```
```
  font-size: 6rem;
```
```
  font-weight: 900;
```
```
  letter-spacing: .04em;
```
```
  display: block;
```
```
  word-spacing: 3rem;
```
```
  line-height: 1.4;
```
```
  text-transform: uppercase;
```
```
}
```
```
.content div {
```
```
  display: inline;
```
```
}
```
```
.content span {
```
```
  display: inline-block;
```
```
}
```
```
.content span:hover {
```
```
  animation: wobble 200ms;
```
```
}
```
```
.content span:nth-child(1n) {
```
```
  color: #F18829;
```

  text-shadow: #ef7b11 1px 1px, #f7bd89 -1px -1px, #f37841 -2px -2px 6px, #f49d4f -2px -2px, #f49d4f -1px -2px, #f49d4f -1px -3px, #f49d4f -2px -4px, #f49d4f -2px -5px, #f49d4f -3px -6px, #F18829 -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;

```
  transform: rotate(-3deg);
```
```
}
```
```
.content span:nth-child(2n) {
```
```
  color: #00B9ED;
```

  text-shadow: #00a5d4 1px 1px, #54d9ff -1px -1px, #08f2ff -2px -2px 6px, #17ccff -2px -2px, #17ccff -1px -2px, #17ccff -1px -3px, #17ccff -2px -4px, #17ccff -2px -5px, #17ccff -3px -6px, #00B9ED -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;

  transform: rotate(3deg) translateY(4%);

```
}
```
```
.content span:nth-child(3n) {
```
```
  color: #ED5053;
```

  text-shadow: #eb393c 1px 1px, #f7acae -1px -1px, #ef6780 -2px -2px 6px, #f17577 -2px -2px, #f17577 -1px -2px, #f17577 -1px -3px, #f17577 -2px -4px, #f17577 -2px -5px, #f17577 -3px -6px, #ED5053 -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;

```
  transform: rotate(-3deg);
```
```
}
```
```
.content span:nth-child(4n) {
```
```
  color: #00AF4F;
```

  text-shadow: #009643 1px 1px, #16ff7f -1px -1px, #00c939 -2px -2px 6px, #00d861 -2px -2px, #00d861 -1px -2px, #00d861 -1px -3px, #00d861 -2px -4px, #00d861 -2px -5px, #00d861 -3px -6px, #00AF4F -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;

```
  transform: rotate(-2deg);
```
```
}
```
```
.content span:nth-child(5n) {
```
```
  color: #8E509F;
```

  text-shadow: #7f478e 1px 1px, #ba8fc6 -1px -1px, #8e5cad -2px -2px 6px, #a266b2 -2px -2px, #a266b2 -1px -2px, #a266b2 -1px -3px, #a266b2 -2px -4px, #a266b2 -2px -5px, #a266b2 -3px -6px, #8E509F -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;

  transform: rotate(3deg) translateY(-2%);

```
}
```
```
.content span:nth-child(6n) {
```
```
  color: #F9DE00;
```

  text-shadow: #e0c700 1px 1px, #ffee60 -1px -1px, #ffbe14 -2px -2px 6px, #ffe723 -2px -2px, #ffe723 -1px -2px, #ffe723 -1px -3px, #ffe723 -2px -4px, #ffe723 -2px -5px, #ffe723 -3px -6px, #F9DE00 -4px -7px, rgba(0, 0, 5, 0.4) 3px 4px 5px, rgba(0, 0, 5, 0.2) -3px -4px 5px;

  transform: rotate(5deg) translateY(1%);

```
}
```
```
 
```
```
@keyframes wobble {
```
```
  50% {
```
```
    transform: translate(2%, 2%);
```
```
  }
```
```
}
```

JavaScript 代码：

JS 代码的左右主要是克隆字母的内容。代码如下：

```
'use strict';
```

var container = document.querySelector('.content');

```
var content = container.innerText;
```
```
 
```

function formatContent(content, container) {

  var contentArray = content.split(' ');

  var formattedContent = document.createElement('div');

```
  contentArray.map(function (word) {
```

    formattedContent.appendChild(createWord(word));

```
  });
```
```
  console.log(contentArray);
```
```
 
```

  container.replaceChild(formattedContent, container.firstChild);

```
};
```
```
 
```
```
function createWord(characters) {
```

  var word = document.createElement('div');

```
  var wordArray = characters.split('');
```
```
  wordArray.map(function (char) {
```

    word.appendChild(formatCharacter(char));

```
  });
```

  word.appendChild(formatCharacter(' '));

```
  return word;
```
```
}
```
```
 
```
```
function formatCharacter(text) {
```
```
  var text = text === ' ' ? ' ' : text;
```

  var character = document.createElement('span');

```
  character.innerHTML = text;
```
```
  return character;
```
```
}
```
```
 
```
```
formatContent(content, container);
```

js+css 炫酷 3D 立体卡通文字特效

已有 735 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

文本/链接

js+css炫酷3D立体卡通文字特效

HTML 结构：

CSS 样式：

JavaScript 代码：

js+css 炫酷 3D 立体卡通文字特效

相关文章

纯CSS3制作可编辑的微软Word样式文档

Autotyperjs 打字机动画特效插件

标题文字动画jQuery插件

发表回复取消回复

热销模板

文本/链接

HTML 结构：

CSS 样式：

JavaScript 代码：

js+css 炫酷 3D 立体卡通文字特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复