网站首页 > 技术文章正文

现代CSS:纯 CSS 实现文字波浪动画

nanyue 2024-07-22 13:55:15 技术文章 8 ℃

实现文字波浪动画，我们首先想到的是使用 Javascript 来实现。如今，现代 CSS 属性已逐渐被现代浏览器所支持，本文将探索使用纯 CSS 来实现。

1.效果预览

2.实现方案

实现方案主要使用现代 CSS 提供的样式属性来实现：

一个 HTML 元素 h1
text-stroke 实现文字镂空
background-clip 实现背景裁切
radial-gradient 实现背景渐变
animation 实现波浪动画

2.1.创建页面框架

使用 html:5 和 div[class=wavy-text]{Wavy Text Animation} 快速创建页面框架:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>现代CSS：纯 CSS 实现文字波浪动画</title>
  </head>
  <body>
    <div class="wavy-text">Wavy Text Animation</div>
  </body>
</html>

2.2.实现文字镂空效果

镂空效果实现比较简单，主要通过 color 和 text-stroke 属性来实现

.wavy-text {
  --color: #269af2;
  color: transparent;
  -webkit-text-stroke: 0.2rem var(--color);
}

2.3.实现背景色渐变

背景色渐变，主要使用到了 radial-gradient 和

.wavy-text {
  --color: #269af2;

  --_p: 93% 83.5% at;
  --_g1: radial-gradient(var(--_p) bottom, var(--color) 79.5%, #0000 80%)
    no-repeat;
  --_g2: radial-gradient(var(--_p) top, #0000 79.5%, var(--color) 80%)
    no-repeat;
  /* 背景颜色 */
  background: var(--_g1), var(--_g2), var(--_g1), var(--_g2);
}

2.4.实现背景裁切

背景裁切主要用到了 CSS 属性 background-clip, 实现文本裁切效果。该属性已经被现代浏览器所支持，但是部分浏览器需要使用 -webkit- 前缀来支持。

.wavy-text {
  -webkit-background-clip: text;
          background-clip: text;
}

2.5.实现波浪动画

实现波浪动画，主要是通过背景位置 backgroun-position 和 background-size 的变化来实现，动画中增加了无线循环。

.wavy-text {
  animation: s 2s infinite alternate, m 3s infinite linear;
}
@keyframes m {
  0% {
    background-position: -200% 100%, -100% 100%, 0% 100%, 100% 100%;
  }
  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%, 300% 100%;
  }
}
@keyframes s {
  0% {
    background-size: 50.5% 80%;
  }
  33% {
    background-size: 50.5% 70%;
  }
  66% {
    background-size: 50.5% 85%;
  }
  100% {
    background-size: 50.5% 95%;
  }
}

2.6.实现文本居中

实现文本水平垂直居中，我们仅用了一行 CSS 代码 place-content 来实现，它是 align-content 和 justify-content 的混合属性。

body {
  display: grid;
  place-content: center;
}

3.总结

现代 CSS 相关属性已经被越来越多的浏览器所支持，通过 CSS 来实现的效果也越来越多，欢迎大家和小懒一起关注和学习。

如果本文对您有帮助，欢迎关注、点赞和转发，感谢您的支持！

网站首页 > 技术文章 正文