js+css实现文字散开重组动画特效代码分享

下面给出“js+css实现文字散开重组动画特效”的完整攻略。

原理说明

该特效的实现需要使用到CSS 的 transform 属性来进行文字的位移、旋转等操作。同时，通过JS 中的事件绑定实现触发动画效果。

1. 首先将文字拆分为单个的字体元素
2. 随后，通过JS 代码将单个的字体元素进行位置、旋转等方面的定义
3. 当触发动画效果时，JS 代码随机分配位置和角度等属性，并且添加CSS 动画特效，使得字体元素散开；同样，当触发“合并”动画效果时，JS 代码也会对字体元素进行“合并”的操作。

实现步骤

下面我们将按照步骤来说明如何实现这个动画特效。

准备工作

文字散开重组的动画特效需要引用两个文件，分别是 fontawesome.css 和 index.css。

其中，fontawesome.css 文件用于引入各种图标字体，并需要在HTML文档中进行定义。

index.css 文件用于定义动画特效样式。

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="index.css">

定义HTML

将需要动画展示的文字放在 <h1> 标签中，并且为每个字设置 span 标签。

<h1 class="font-effect-3d">
  <span>W</span>
  <span>E</span>
  <span>B</span>
  <span>D</span>
  <span>E</span>
  <span>S</span>
  <span>I</span>
  <span>G</span>
  <span>N</span>
</h1>

编写javascript

const container = document.querySelector('.font-effect-3d');
const spans = document.querySelectorAll('.font-effect-3d span');
const letters = [];

for (let index = 0; index < spans.length; index++) {
  letters.push(spans[index].innerHTML);
  spans[index].innerHTML = `<span class="letter-container">${spans[index].innerHTML}</span>`;
}

for (let index = 0; index < letters.length; index++) {
  spans[index].querySelector('.letter-container').style.transform = `translate(0, ${index * -20}px)`;
}

const createAnimation = state => {
  for (let index = 0; index < letters.length; index++) {
    const span = spans[index];
    const letter = letters[index];
    if (state === 'out') {
      span.style.animationName = 'letter-out';
      span.style.animationDelay = `${index * 0.05}s`;
      span.style.animationTimingFunction = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
      span.style.animationDuration = '1s';
    } else if (state === 'in') {
      span.style.animationName = 'letter-in';
      span.style.animationDelay = `${(letters.length - index) * 0.05}s`;
      span.style.animationTimingFunction = 'cubic-bezier(0.250, 0.460, 0.450, 0.940)';
      span.style.animationDuration = '1s';
    }
    if (state !== 'reset') {
      span.addEventListener('animationend', () => {
        span.style.animation = '';
      });
    }
    if (state === 'reset') {
      span.style.transform = '';
    }
  }
};

container.addEventListener('mousedown', () => {
  createAnimation('out');
});

container.addEventListener('mouseup', () => {
  setTimeout(() => {
    createAnimation('in');
  }, 1000);
});

createAnimation('reset');

编写CSS

@keyframes letter-out {
  to {
    transform: scale(2) rotate(90deg) translateX(500px);
    opacity: 0;
  }
}

@keyframes letter-in {
  from {
    transform: scale(2) rotate(90deg) translateX(500px);
    opacity: 0;
  }
}

.letter-container {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.5s ease-out;
}

.font-effect-3d {
  font-size: 8rem;
  font-family: 'Playfair Display SC', serif;
  text-transform: uppercase;
  color: #c2a971;
  width: 100%;
  text-align: center;
  position: relative;
  perspective: 2000px;
  user-select: none;
  -webkit-user-select: none;
}

.font-effect-3d span {
  display: inline-block;
  position: relative;
  transition: transform 0.5s ease-out;
  top: 0px;
  left: 0px;
  z-index: 2;
  opacity: 0.7;
}

.font-effect-3d span:after {
  content: attr(data-letter);
  position: absolute;
  top: 0px;
  left: 0px;
  color: #333;
  z-index: -1;
  opacity: 0;
}

.font-effect-3d:hover span:after,
.font-effect-3d:focus span:after {
  transform: translate3d(10px, 10px, -50px);
  opacity: 1;
  transition-delay: 0.5s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000), ease-out;
}

.font-effect-3d:active span:after {
  transform: translate3d(10px, 10px, -50px) rotateX(180deg);
  opacity: 0;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}

示例说明

示例一

以校园英语日为例，如下图所示，当用户鼠标点击触发时，字体进行散开动画并重组成新的单词。

示例代码：https://codepen.io/lindc/pen/MXjZMo

示例二

以文本转换工具为例，如下图所示，当用户输入单词时，字体原地旋转随机重组为新字体组合。

示例代码：https://codepen.io/jcoulterdesign/pen/KygoKj