七夏 发表于 2024-10-17 21:04:54

闪烁波浪文本动画效果

# 闪烁波浪文本动画

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

## 演示效果

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/3tk5sUAlYXqGAgdnl8YCibx1tls7MHryNDR8dicPpTnb1U8B9xBTMdD49ChNtSiaM0DEwTZh3C6Jc7q5xGOHFo9YQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1 "null")

## 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变量`。如果是空字符我们使用 `&nbsp;`替换，保证设置 `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`。这样每个文字就会依次执行动画。
页: [1]
查看完整版本: 闪烁波浪文本动画效果