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:定义了一个关键帧动画,用于控制波动效果的旋转。
相关推荐
乖女子@@@11 分钟前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育15 分钟前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
伐尘1 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e1 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost1 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati1 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪1 小时前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme2 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼2 小时前
前端面试中值得关注的js题
前端·面试
UnnamedOrange2 小时前
有来前后端部署
前端·后端