HTML&CSS：超炫丝滑的卡片水波纹效果

这段代码创建了一个卡片，卡片上有三个波动效果，这些波动效果通过 CSS 的@keyframes 动画实现，创建了一个旋转的动画效果。这种效果适用于创建动态的视觉效果，例如音乐播放器的封面、动态背景或其他需要动态效果的界面元素。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/c077dc6630dd49a9b057759492c974b9.gif#pic_center)
<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：定义了一个关键帧动画，用于控制波动效果的旋转。