HTML&CSS：多边形动态卡片

这些代码结合了CSS的渐变背景、动画、变换和混合模式，创建了一个视觉上引人入胜且交互性强的动态效果。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            min-height: 100vh;
            background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .interactive-container {
            position: relative;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        }

        .interactive-container:hover {
            transform: scale(1.05) rotate(0deg);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3),
                inset 0 0 20px rgba(255, 255, 255, 0.1);
        }

        .shape {
            position: absolute;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .shape-1 {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, #ff3366, #ff6b6b);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            top: 50px;
            left: 50px;
            mix-blend-mode: screen;
            animation: float1 4s infinite ease-in-out;
        }

        .shape-2 {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            clip-path: circle(50% at 50% 50%);
            bottom: 50px;
            right: 50px;
            mix-blend-mode: screen;
            animation: float2 5s infinite ease-in-out;
        }

        .shape-3 {
            width: 80px;
            height: 80px;
            background: linear-gradient(225deg, #ffd86f, #fc6262);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            top: 100px;
            right: 80px;
            mix-blend-mode: screen;
            animation: float3 6s infinite ease-in-out;
        }

        .shape-4 {
            width: 90px;
            height: 90px;
            background: linear-gradient(315deg, #a8edea, #fed6e3);
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
            bottom: 80px;
            left: 80px;
            mix-blend-mode: screen;
            animation: float4 7s infinite ease-in-out;
        }

        .shape-5 {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, #bf0fff, #cbff49);
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
            top: 30px;
            right: 30px;
            mix-blend-mode: screen;
            animation: float5 5.5s infinite ease-in-out;
        }

        .shape-6 {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #00ff87, #60efff);
            clip-path: circle(50% at 50% 50%);
            bottom: 30px;
            left: 30px;
            mix-blend-mode: screen;
            animation: float6 6.5s infinite ease-in-out;
        }

        .interactive-container:hover .shape {
            transform: scale(1.2) rotate(15deg);
            filter: brightness(1.2) contrast(1.1);
        }

        .interactive-container:has(.shape:hover) .shape:not(:hover) {
            transform: scale(0.8) rotate(-15deg);
            opacity: 0.6;
            filter: blur(2px);
        }

        .glow {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            pointer-events: none;
            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
                    rgba(255, 255, 255, 0.2) 0%,
                    rgba(255, 255, 255, 0) 60%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .interactive-container:hover .glow {
            opacity: 1;
        }

        .sparkles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background-image: radial-gradient(circle at 20% 30%,
                    white 1px,
                    transparent 1px),
                radial-gradient(circle at 80% 20%, white 1px, transparent 1px),
                radial-gradient(circle at 40% 70%, white 1px, transparent 1px),
                radial-gradient(circle at 70% 60%, white 1px, transparent 1px);
            background-size: 100% 100%;
            opacity: 0;
            transition: opacity 0.3s ease;
            animation: twinkle 2s infinite;
        }

        .interactive-container:hover .sparkles {
            opacity: 0.5;
        }

        @keyframes float1 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            50% {
                transform: translate(10px, -10px) rotate(5deg);
            }
        }

        @keyframes float2 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            50% {
                transform: translate(-15px, 5px) rotate(-8deg);
            }
        }

        @keyframes float3 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            50% {
                transform: translate(8px, 12px) rotate(12deg);
            }
        }

        @keyframes float4 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            50% {
                transform: translate(-12px, -8px) rotate(-15deg);
            }
        }

        @keyframes float5 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            50% {
                transform: translate(15px, -5px) rotate(10deg);
            }
        }

        @keyframes float6 {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            50% {
                transform: translate(-8px, 12px) rotate(-12deg);
            }
        }

        @keyframes twinkle {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.5;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.7;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="interactive-container">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
            <div class="shape shape-4"></div>
            <div class="shape shape-5"></div>
            <div class="shape shape-6"></div>
            <div class="glow"></div>
            <div class="sparkles"></div>
        </div>
    </div>
</body>

</html>

HTML 结构

container：定义整个页面的容器，设置背景渐变和居中对齐。
interactive-container：定义交互式容器，包含多个形状和特效。
shape shape-1：定义第一个形状，具有独特的渐变背景和动画效果。
shape shape-2：定义第二个形状，具有圆形渐变背景和动画效果。
shape shape-3：定义第三个形状，具有三角形渐变背景和动画效果。
shape shape-4：定义第四个形状，具有多边形渐变背景和动画效果。
shape shape-5：定义第五个形状，具有三角形渐变背景和动画效果。
shape shape-6：定义第六个形状，具有圆形渐变背景和动画效果。
glow：定义一个发光效果层，用于增强视觉效果。
sparkles：定义一个闪烁效果层，用于增强视觉效果。

CSS 样式

*：全局样式，设置所有元素的外边距和内边距为0，使用border-box计算尺寸。
.container：定义页面的容器样式，设置最小高度为视口高度，背景为线性渐变，居中对齐内容。
.interactive-container：定义交互式容器的样式，包括尺寸、背景、圆角、模糊效果、过渡动画和阴影。
.interactive-container:hover：定义交互式容器鼠标悬停时的样式，包括缩放、旋转、边框颜色和阴影变化。
.shape：定义形状的基本样式，包括绝对定位和过渡动画。
.shape-1：定义第一个形状的样式，包括尺寸、渐变背景、裁剪路径、位置和混合模式。
.shape-2：定义第二个形状的样式，包括尺寸、圆形渐变背景、位置和混合模式。
.shape-3：定义第三个形状的样式，包括尺寸、三角形渐变背景、位置和混合模式。
.shape-4：定义第四个形状的样式，包括尺寸、多边形渐变背景、位置和混合模式。
.shape-5：定义第五个形状的样式，包括尺寸、三角形渐变背景、位置和混合模式。
.shape-6：定义第六个形状的样式，包括尺寸、圆形渐变背景、位置和混合模式。
.interactive-container:hover .shape：定义交互式容器鼠标悬停时形状的样式，包括缩放和旋转。
.interactive-container:has(.shape:hover) .shape:not(:hover)：定义交互式容器中未悬停的形状的样式，包括缩放、旋转、透明度和模糊效果。
.glow：定义发光效果层的样式，包括绝对定位、尺寸、圆角、背景渐变和透明度。
.interactive-container:hover .glow：定义交互式容器鼠标悬停时发光效果层的样式，包括透明度变化。
.sparkles：定义闪烁效果层的样式，包括绝对定位、尺寸和背景图像。
.interactive-container:hover .sparkles：定义交互式容器鼠标悬停时闪烁效果层的样式，包括透明度变化。
@keyframes float1：定义第一个形状的浮动动画。
@keyframes float2：定义第二个形状的浮动动画。
@keyframes float3：定义第三个形状的浮动动画。
@keyframes float4：定义第四个形状的浮动动画。
@keyframes float5：定义第五个形状的浮动动画。
@keyframes float6：定义第六个形状的浮动动画。
@keyframes twinkle：定义闪烁效果的动画。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！