CSS3白云飘动动画特效

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3白云飘动动画特效</title>
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 主体样式 */
        body {
            height: 100vh; /* 视口高度 */
            background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%); /* 天空渐变背景 */
            overflow: hidden; /* 隐藏溢出内容 */
            position: relative; /* 相对定位 */
            font-family: Arial, sans-serif; /* 字体设置 */
        }

        /* 白云基础样式 */
        .cloud {
            position: absolute; /* 绝对定位 */
            background: white; /* 白色云朵 */
            border-radius: 50%; /* 圆形 */
            filter: blur(5px); /* 模糊效果使云更柔和 */
            opacity: 0.9; /* 半透明效果 */
            animation-timing-function: linear; /* 线性动画 */
            animation-iteration-count: infinite; /* 无限循环 */
        }

        /* 大白云样式 */
        .cloud-large {
            width: 150px; /* 宽度 */
            height: 60px; /* 高度 */
            animation-name: moveCloudLarge; /* 动画名称 */
            animation-duration: 60s; /* 动画时长 */
        }

        /* 中白云样式 */
        .cloud-medium {
            width: 100px; /* 宽度 */
            height: 40px; /* 高度 */
            animation-name: moveCloudMedium; /* 动画名称 */
            animation-duration: 40s; /* 动画时长 */
        }

        /* 小白云样式 */
        .cloud-small {
            width: 70px; /* 宽度 */
            height: 30px; /* 高度 */
            animation-name: moveCloudSmall; /* 动画名称 */
            animation-duration: 30s; /* 动画时长 */
        }

        /* 大白云动画 */
        @keyframes moveCloudLarge {
            0% {
                left: -200px; /* 起始位置 */
                top: 20%; /* 垂直位置 */
                transform: scale(1); /* 初始大小 */
            }
            50% {
                transform: scale(1.1); /* 中间变大 */
            }
            100% {
                left: 110%; /* 移动到右侧 */
                top: 15%; /* 轻微上下浮动 */
                transform: scale(1); /* 恢复大小 */
            }
        }

        /* 中白云动画 */
        @keyframes moveCloudMedium {
            0% {
                left: -150px; /* 起始位置 */
                top: 40%; /* 垂直位置 */
                transform: scale(1); /* 初始大小 */
            }
            50% {
                transform: scale(1.05); /* 中间轻微变大 */
            }
            100% {
                left: 110%; /* 移动到右侧 */
                top: 35%; /* 轻微上下浮动 */
                transform: scale(1); /* 恢复大小 */
            }
        }

        /* 小白云动画 */
        @keyframes moveCloudSmall {
            0% {
                left: -100px; /* 起始位置 */
                top: 60%; /* 垂直位置 */
                transform: scale(1); /* 初始大小 */
            }
            50% {
                transform: scale(1.03); /* 中间轻微变大 */
            }
            100% {
                left: 110%; /* 移动到右侧 */
                top: 65%; /* 轻微上下浮动 */
                transform: scale(1); /* 恢复大小 */
            }
        }

        /* 云朵阴影部分(增强立体感) */
        .cloud::before, .cloud::after {
            content: ''; /* 伪元素内容 */
            position: absolute; /* 绝对定位 */
            background: white; /* 白色 */
            border-radius: 50%; /* 圆形 */
            filter: blur(3px); /* 模糊效果 */
        }

        /* 大云朵的阴影部分 */
        .cloud-large::before {
            width: 80px; /* 宽度 */
            height: 80px; /* 高度 */
            top: -30px; /* 位置 */
            left: 20px; /* 位置 */
        }

        .cloud-large::after {
            width: 50px; /* 宽度 */
            height: 50px; /* 高度 */
            top: -20px; /* 位置 */
            left: 80px; /* 位置 */
        }

        /* 中云朵的阴影部分 */
        .cloud-medium::before {
            width: 60px; /* 宽度 */
            height: 60px; /* 高度 */
            top: -20px; /* 位置 */
            left: 10px; /* 位置 */
        }

        .cloud-medium::after {
            width: 40px; /* 宽度 */
            height: 40px; /* 高度 */
            top: -15px; /* 位置 */
            left: 50px; /* 位置 */
        }

        /* 小云朵的阴影部分 */
        .cloud-small::before {
            width: 40px; /* 宽度 */
            height: 40px; /* 高度 */
            top: -15px; /* 位置 */
            left: 10px; /* 位置 */
        }

        .cloud-small::after {
            width: 30px; /* 宽度 */
            height: 30px; /* 高度 */
            top: -10px; /* 位置 */
            left: 35px; /* 位置 */
        }

        /* 网站链接样式 */
        .website-link {
            position: fixed; /* 固定定位 */
            bottom: 20px; /* 底部位置 */
            right: 20px; /* 右侧位置 */
            color: #333; /* 文字颜色 */
            font-size: 14px; /* 字体大小 */
            text-decoration: none; /* 无下划线 */
            z-index: 100; /* 层级 */
        }

        /* 标题样式 */
        .title {
            position: absolute; /* 绝对定位 */
            top: 50%; /* 垂直居中 */
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%); /* 精确居中 */
            color: white; /* 白色文字 */
            font-size: 36px; /* 字体大小 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 文字阴影 */
            z-index: 10; /* 层级 */
        }
    </style>
</head>
<body>
    <!-- 标题 -->
    <h1 class="title">白云飘动动画特效</h1>

    <!-- 大白云 -->
    <div class="cloud cloud-large" style="animation-delay: 0s;"></div>
    <div class="cloud cloud-large" style="animation-delay: 10s;"></div>
    <div class="cloud cloud-large" style="animation-delay: 20s;"></div>

    <!-- 中白云 -->
    <div class="cloud cloud-medium" style="animation-delay: 5s;"></div>
    <div class="cloud cloud-medium" style="animation-delay: 15s;"></div>
    <div class="cloud cloud-medium" style="animation-delay: 25s;"></div>

    <!-- 小白云 -->
    <div class="cloud cloud-small" style="animation-delay: 0s;"></div>
    <div class="cloud cloud-small" style="animation-delay: 7s;"></div>
    <div class="cloud cloud-small" style="animation-delay: 14s;"></div>
    <div class="cloud cloud-small" style="animation-delay: 21s;"></div>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值