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:定义了一个关键帧动画,用于控制波动效果的旋转。
相关推荐
祝余呀7 分钟前
HTML初学者第三天
前端·html
就爱瞎逛23 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81626 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者41 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app