闪烁波浪文本动画效果

七夏（UID：1） · 发表于 2024-10-17 21:04:54

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

闪烁波浪文本动画

本节主要使用HTML+CSS+JS实现一个闪烁波浪文本动画效果，此效果可用于多种场景，例如加载，生成数据等情况。

演示效果

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>闪烁波浪文本动画</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="shimmer-wave">数据正在加载中 即将为您呈现...</div>

<script src="script.js"></script>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
}

#shimmer-wave {
  color: #46afc8;
  font-size: 16px;
  font-weight: 600;
  perspective: 80px;
  transform-style: preserve-3d;
}

#shimmer-wave span {
  position: relative;
  display: inline-block;
  animation: wave 2.4s ease infinite;
  animation-delay: calc(var(--i) * .05s);
  letter-spacing: 0.01em;
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
}


@keyframes wave {
  0% {
    transform: translate3D(0,0,0) scale(1) rotateY(0);
    color: #46afc8;
    text-shadow: 0 0 0 #46afc8;
  }
  12% {
    transform: translate3D(2px,-2px,2px) scale(1.16) rotateY(6deg);
    color: #46afc8;
    filter: brightness(3);
  }
  15% {
    text-shadow: 0 0 2px #46afc8;
  }
  24% {
    transform: translate3D(0,0,0) scale(1) rotateY(0);
    color: #46afc8;
    filter: brightness(1);
    opacity: 1;
  }
  36% {
    transform: translate3D(0,0,0) scale(1);
  }
  100% {
    transform: scale(1);
    opacity: .8;
  }
}

JAVASCRIPT

const shimmerWave = document.getElementById('shimmer-wave');

shimmerWave.innerHTML = shimmerWave.innerText.split('').map((char, i) => {
  return `<span style="--i: ${i}">${char.replace(' ', ' ')}</span>`;
}).join('')

代码解析

<div id="shimmer-wave">数据正在加载中 即将为您呈现...</div>

shimmerWave.innerHTML = shimmerWave.innerText.split('').map((char, i) => {
  return `<span style="--i: ${i}">${char.replace(' ', ' ')}</span>`;
}).join('')

我们使用JAVASCRIPT将文本内容每个文字用 span标签包裹起来。给每个 span定义一个 css变量。如果是空字符我们使用  替换，保证设置 display: inline-block后文字空格仍存在。

animation: wave 2.4s ease infinite;
animation-delay: calc(var(--i) * .05s);

@keyframes wave {
  0% {
    transform: translate3D(0,0,0) scale(1) rotateY(0);
    color: #46afc8;
    text-shadow: 0 0 0 #46afc8;
  }
  12% {
    transform: translate3D(2px,-2px,2px) scale(1.16) rotateY(6deg);
    color: #46afc8;
    filter: brightness(3);
  }
  15% {
    text-shadow: 0 0 2px #46afc8;
  }
  24% {
    transform: translate3D(0,0,0) scale(1) rotateY(0);
    color: #46afc8;
    filter: brightness(1);
    opacity: 1;
  }
  36% {
    transform: translate3D(0,0,0) scale(1);
  }
  100% {
    transform: scale(1);
    opacity: .8;
  }
}

在 css中使用定义的 wave动画, 并设置延迟执行 animation-delay, 🈯️就设置为 calc(var(--i) * .05s): 每个 span定义的变量值乘以 0.05s。这样每个文字就会依次执行动画。

闪烁波浪文本动画效果

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

闪烁波浪文本动画

演示效果

HTML

CSS

JAVASCRIPT

代码解析

快速回帖

分享帝

龙年限定

关于楼主

商务推广