纯CSS打造现代文字波浪动画效果

发表时间: 2023-11-20 23:05

实现文字波浪动画，我们首先想到的是使用 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 来实现的效果也越来越多，欢迎大家和小懒一起关注和学习。

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