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

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

原理说明

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

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

实现步骤

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

准备工作

文字散开重组的动画特效需要引用两个文件,分别是 fontawesome.cssindex.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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js+css实现文字散开重组动画特效代码分享 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript 申明函数的三种方法 每个函数就是一个对象(一)

    根据你的要求,我来详细讲解一下“JavaScript 申明函数的三种方法 每个函数就是一个对象(一)”的完整攻略。 什么是函数? 在JavaScript中,函数是一种可重用的代码块,可以接收输入信息并返回输出。我们可以使用函数来封装一些代码,然后在需要的时候调用它。 申明函数的三种方法 在JavaScript中,我们可以使用三种不同的方式来申明一个函数。 1…

    JavaScript 2023年5月27日
    00
  • Javascript模块导入导出详解

    下面是Javascript模块导入导出详解的完整攻略。 什么是Javascript模块 Javascript模块是Javascript中的一种代码组织方式,它将代码分割成更小的、更易于维护的模块,每个模块都有自己的作用域和功能。模块可以包含变量、函数、类等,通过模块的方式来导入和导出这些内容,可以实现模块化开发的效果。 模块的导出 Javascript模块的…

    JavaScript 2023年5月27日
    00
  • javascript设计模式–策略模式之输入验证

    JavaScript 设计模式 — 策略模式之输入验证 在 JavaScript 中,策略模式是一种行为型模式,它允许开发人员定义一些独立的算法,并将它们封装成一个库以便能够重用、扩展和替换。 1. 策略模式概述 策略模式的核心思想是创建一个抽象的策略接口,然后实现不同的策略来解决同一个问题。在 JavaScript 中,我们可以使用对象字面量的方式来模拟…

    JavaScript 2023年6月10日
    00
  • Move.js入门

    Move.js入门攻略 什么是Move.js Move.js是一个轻量级的JavaScript动画库,用于实现Web页面中的动画效果。它支持常用的CSS动画属性以及自定义路径和缓动效果,同时具有跨浏览器兼容性和高性能特点。 安装Move.js 可以通过以下两种方式来安装Move.js: 从官方网站下载move.min.js文件并引入到HTML文件中: &lt…

    JavaScript 2023年6月10日
    00
  • JavaScript实现简易飞机大战

    下面我将详细讲解“JavaScript实现简易飞机大战”的完整攻略。 前言 在开始编写代码之前,我们需要先了解一下游戏的基本结构和要素,主要包括游戏界面、玩家飞机、敌机、子弹、游戏结束等。在了解了这些基本要素后,我们才能更好的开始编写游戏代码。 游戏界面 游戏的界面主要由背景和玩家飞机、敌机等元素组成。我们可以使用HTML和CSS创建一个游戏界面,其中CSS…

    JavaScript 2023年6月11日
    00
  • 用js读、写、删除Cookie代码分享及详细注释说明

    下面为大家分享JS读、写、删除Cookie的攻略,首先我们来简单了解一下Cookie。 Cookie简介 Cookie是一种存储在用户计算机上的小文件,它可以存储网站发送到用户计算机上的信息,以便于在用户下一次访问同一网站时使用,它属于浏览器缓存的一种。当然,Cookie的存储大小是有限制的,一般不超过4KB。 读Cookie 读取Cookie很简单,我们可…

    JavaScript 2023年6月11日
    00
  • JavaScript闭包 懂不懂由你反正我是懂了

    JavaScript闭包是一种非常重要的概念,它在JavaScript开发中有着广泛的应用。对于初学者,理解闭包通常是比较难的,但只要掌握了闭包的基本原理,它对于我们掌握JavaScript编程技能将会带来很大的帮助。 什么是JavaScript闭包? JavaScript闭包指的是访问定义在函数内部作用域里的变量的函数。通俗来说,是在函数中定义并返回另一个…

    JavaScript 2023年6月10日
    00
  • javascript 取小数点后几位几种方法总结

    关于JavaScript取小数点后几位的方法,可以结合下面的代码和说明来进行总结: 一、使用toFixed方法 JavaScript内置的toFixed方法可以将一个数字四舍五入为指定小数位的数字字符串,具体语法如下: numObj.toFixed([digits]) 参数digits是可选的,表示需要保留的小数位数,如果不传入该参数则默认保留0位小数。调用…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部