好看的背景色

最新推荐文章于 2025-11-24 21:21:07 发布

原创最新推荐文章于 2025-11-24 21:21:07 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

微信小程序同时被 3 个专栏收录

28 篇文章

订阅专栏

Html

22 篇文章

订阅专栏

CSS

9 篇文章

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 基础容器样式 */
    .dynamic-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        overflow: hidden;
    }

    /* 渐变光球样式 */
    .gradient-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        animation: float 20s infinite ease-in-out;
    }

    /* 紫色-蓝色光球 */
    .orb-1 {
        width: 400px;
        height: 400px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        top: -100px;
        right: -100px;
        animation-delay: 0s;
    }

    /* 青色-紫色光球 */
    .orb-2 {
        width: 300px;
        height: 300px;
        background: linear-gradient(135deg, #00f5ff 0%, #667eea 100%);
        bottom: 100px;
        left: -100px;
        animation-delay: -7s;
    }

    /* 红色-橙色光球 */
    .orb-3 {
        width: 250px;
        height: 250px;
        background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-delay: -14s;
    }

    /* 浮动动画 */
    @keyframes float {

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

        33% {
            transform: translate(30px, -30px) scale(1.1);
        }

        66% {
            transform: translate(-20px, 20px) scale(0.9);
        }
    }

    /* 毛玻璃遮罩 */
    .glass-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 2;
    }

    /* 使用示例 */
    body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        position: relative;
        background: #0a0a0a;
        overflow: hidden;
    }
</style>

<body>




    <!-- 动态背景容器 -->
    <div class="dynamic-bg">
        <div class="gradient-orb orb-1"></div>
        <div class="gradient-orb orb-2"></div>
        <div class="gradient-orb orb-3"></div>
    </div>

    <!-- 毛玻璃遮罩 -->
    <div class="glass-overlay"></div>

</body>

</html>