这段代码创建了一个卡片，卡片上有三个波动效果，这些波动效果通过 CSS 的@keyframes 动画实现，创建了一个旋转的动画效果。这种效果适用于创建动态的视觉效果，例如音乐播放器的封面、动态背景或其他需要动态效果的界面元素。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>公众号关注：前端Hardy</title><style>body {margin: 0;padding: 0;background: #212121;display: flex;align-items: center;justify-content: center;height: 100vh;}.e-card {margin: 100px auto;background: transparent;box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.45);position: relative;width: 200px;height: 200px;border-radius: 16px;overflow: hidden;}.wave {position: absolute;width: 540px;height: 700px;opacity: 0.6;left: 0;top: 0;margin-left: -50%;margin-top: -70%;background: linear-gradient(744deg, #af40ff, #5b42f3 60%, #00ddeb);}.info {text-align: center;font-size: 20px;position: absolute;top: 5.6em;left: 0;right: 0;color: rgb(255, 255, 255);font-weight: 600;}.text {font-size: 14px;font-weight: 100;position: relative;font-weight: 600;top: 1em;text-transform: lowercase;}.wave:nth-child(2),.wave:nth-child(3) {top: 210px;}.playing .wave {border-radius: 40%;animation: wave 3000ms infinite linear;}.wave {border-radius: 40%;animation: wave 55s infinite linear;}.playing .wave:nth-child(2) {animation-duration: 4000ms;}.wave:nth-child(2) {animation-duration: 50s;}.playing .wave:nth-child(3) {animation-duration: 5000ms;}.wave:nth-child(3) {animation-duration: 45s;}@keyframes wave {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style>
</head><body><div class="e-card playing"><div class="wave"></div><div class="wave"></div><div class="wave"></div><div class="info"><div class="text">前端Hardy</div></div></div>
</body></html>HTML 结构
- e-card playing：定义了一个类名为 e-card 的 div 元素，表示电子卡片，并且添加了 playing 类来激活波动效果。
- wave：三个类名为 wave 的 div 元素，用于创建波动效果。
- info：包含卡片的信息。
- text：显示卡片文本的 div 元素。
CSS 样式
- body：设置页面的外边距、内边距、背景色、显示方式、对齐方式和高度。
- .e-card：定义了电子卡片的基本样式，包括外边距、背景、阴影、位置、尺寸、圆角和溢出。
- .wave：定义了波动效果的基本样式，包括位置、尺寸、透明度、背景渐变和圆角 。
- .info：定义了信息的文本对齐、字体大小、位置和颜色。
- .text：定义了文本的字体大小、位置和文本转换。
- .wave:nth-child(2), .wave:nth-child(3)：为第二和第三个波动效果定义了不同的顶部位置。
- .playing .wave：当.e-card 元素具有 playing 类时，改变波动效果的圆角和动画。
- @keyframes wave：定义了一个关键帧动画，用于控制波动效果的旋转。
