HTML5+SVG花朵动画特效

已于 2025-06-27 11:05:41 修改
阅读量332 收藏 10
点赞数 5
CC 4.0 BY-SA版权
文章标签： 前端 css3 html javascript
于 2025-06-20 15:29:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148793523

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5+SVG花朵动画特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

        .garden {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .flower {
            position: absolute;
            transform-origin: center bottom;
            animation: sway 5s ease-in-out infinite alternate;
        }

        .stem {
            stroke: #4CAF50;
            stroke-width: 8;
            stroke-linecap: round;
        }

        .leaf {
            fill: #4CAF50;
            stroke: #388E3C;
            stroke-width: 2;
            transform-origin: center;
            animation: leafSway 3s ease-in-out infinite alternate;
        }

        .petal {
            transform-origin: center;
            opacity: 0.9;
        }

        .center {
            fill: #FFD700;
            transform-origin: center;
            animation: pulse 2s ease-in-out infinite;
        }

        .credit {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            z-index: 100;
        }

        .credit a {
            color: #FFD700;
            text-decoration: none;
            transition: color 0.3s;
        }

        .credit a:hover {
            color: #FF9800;
        }

        /* 动画定义 */
        @keyframes sway {
            0%, 100% {
                transform: rotate(-3deg);
            }
            50% {
                transform: rotate(3deg);
            }
        }

        @keyframes leafSway {
            0%, 100% {
                transform: rotate(-5deg);
            }
            50% {
                transform: rotate(5deg);
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }

        @keyframes bloom {
            0% {
                transform: scale(0.8) rotate(0deg);
                opacity: 0;
            }
            100% {
                transform: scale(1) rotate(360deg);
                opacity: 0.9;
            }
        }

        /* 花瓣动画 - 每个花瓣有不同的延迟 */
        .petal-1 { animation: bloom 3s ease-out 0.2s forwards, sway 5s ease-in-out 0.2s infinite alternate; }
        .petal-2 { animation: bloom 3s ease-out 0.4s forwards, sway 5s ease-in-out 0.4s infinite alternate; }
        .petal-3 { animation: bloom 3s ease-out 0.6s forwards, sway 5s ease-in-out 0.6s infinite alternate; }
        .petal-4 { animation: bloom 3s ease-out 0.8s forwards, sway 5s ease-in-out 0.8s infinite alternate; }
        .petal-5 { animation: bloom 3s ease-out 1.0s forwards, sway 5s ease-in-out 1.0s infinite alternate; }
        .petal-6 { animation: bloom 3s ease-out 1.2s forwards, sway 5s ease-in-out 1.2s infinite alternate; }
        .petal-7 { animation: bloom 3s ease-out 1.4s forwards, sway 5s ease-in-out 1.4s infinite alternate; }
        .petal-8 { animation: bloom 3s ease-out 1.6s forwards, sway 5s ease-in-out 1.6s infinite alternate; }

        /* 浮动粒子效果 */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            animation: float 15s linear infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.5;
            }
            100% {
                transform: translateY(-1000px) rotate(720deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="garden">
        <div class="particles" id="particles"></div>
        
        <!-- 主花 -->
        <svg class="flower" width="200" height="400" viewBox="0 0 200 400" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">
            <!-- 花茎 -->
            <path class="stem" d="M100,400 C100,350 100,300 100,250 C100,200 110,150 100,100" fill="none" />
            
            <!-- 叶子 -->
            <path class="leaf" d="M100,300 C80,280 50,270 30,290 C20,300 25,320 40,330 C60,340 80,330 100,320" />
            <path class="leaf" d="M100,250 C120,230 150,220 170,240 C180,250 175,270 160,280 C140,290 120,280 100,270" />
            
            <!-- 花瓣 -->
            <path class="petal petal-1" fill="#FF4081" d="M100,100 C90,80 70,70 50,80 C40,90 40,110 50,120 C70,130 90,120 100,110" />
            <path class="petal petal-2" fill="#E91E63" d="M100,100 C110,80 130,70 150,80 C160,90 160,110 150,120 C130,130 110,120 100,110" />
            <path class="petal petal-3" fill="#FF4081" d="M100,90 C80,90 60,100 60,120 C60,130 70,140 80,140 C100,140 110,130 100,120" />
            <path class="petal petal-4" fill="#E91E63" d="M100,90 C120,90 140,100 140,120 C140,130 130,140 120,140 C100,140 90,130 100,120" />
            <path class="petal petal-5" fill="#FF4081" d="M90,100 C70,110 60,130 70,150 C80,160 100,160 100,140" />
            <path class="petal petal-6" fill="#E91E63" d="M110,100 C130,110 140,130 130,150 C120,160 100,160 100,140" />
            <path class="petal petal-7" fill="#FF4081" d="M100,110 C80,120 70,140 80,160 C90,170 100,170 100,150" />
            <path class="petal petal-8" fill="#E91E63" d="M100,110 C120,120 130,140 120,160 C110,170 100,170 100,150" />
            
            <!-- 花蕊 -->
            <circle class="center" cx="100" cy="100" r="15" />
        </svg>
        
        <!-- 小花1 -->
        <svg class="flower" width="120" height="240" viewBox="0 0 120 240" style="left: 30%; top: 60%;">
            <path class="stem" d="M60,240 C60,220 60,200 60,180 C60,160 65,140 60,120" fill="none" />
            <path class="leaf" d="M60,180 C50,170 40,165 35,170 C30,175 35,185 45,190 C55,195 60,190 60,185" />
            <path class="petal petal-1" fill="#FF9800" d="M60,120 C55,110 45,105 40,110 C35,115 35,125 40,130 C50,135 55,130 60,125" />
            <path class="petal petal-2" fill="#FFC107" d="M60,120 C65,110 75,105 80,110 C85,115 85,125 80,130 C70,135 65,130 60,125" />
            <path class="petal petal-3" fill="#FF9800" d="M60,115 C50,115 45,120 45,130 C45,135 50,140 55,140 C60,140 60,135 60,130" />
            <path class="petal petal-4" fill="#FFC107" d="M60,115 C70,115 75,120 75,130 C75,135 70,140 65,140 C60,140 60,135 60,130" />
            <circle class="center" cx="60" cy="120" r="8" />
        </svg>
        
        <!-- 小花2 -->
        <svg class="flower" width="120" height="240" viewBox="0 0 120 240" style="left: 70%; top: 65%;">
            <path class="stem" d="M60,240 C60,220 60,200 60,180 C60,160 55,140 60,120" fill="none" />
            <path class="leaf" d="M60,190 C70,180 75,175 80,180 C85,185 80,195 70,200 C60,205 60,200 60,195" />
            <path class="petal petal-1" fill="#9C27B0" d="M60,120 C50,110 45,105 40,110 C35,115 35,125 40,130 C50,135 55,130 60,125" />
            <path class="petal petal-2" fill="#E91E63" d="M60,120 C70,110 75,105 80,110 C85,115 85,125 80,130 C70,135 65,130 60,125" />
            <path class="petal petal-3" fill="#9C27B0" d="M60,115 C50,115 45,120 45,130 C45,135 50,140 55,140 C60,140 60,135 60,130" />
            <path class="petal petal-4" fill="#E91E63" d="M60,115 C70,115 75,120 75,130 C75,135 70,140 65,140 C60,140 60,135 60,130" />
            <circle class="center" cx="60" cy="120" r="8" />
        </svg>
        
        <div class="credit">
        </div>
    </div>

    <script>
        // 创建浮动粒子
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.getElementById('particles');
            const colors = ['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.2)', 'rgba(255,255,255,0.1)'];
            
            for (let i = 0; i < 20; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                // 随机大小
                const size = Math.random() * 10 + 5;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机位置
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100 + 100}%`;
                
                // 随机颜色
                particle.style.background = colors[Math.floor(Math.random() * colors.length)];
                
                // 随机动画延迟和持续时间
                particle.style.animationDelay = `${Math.random() * 15}s`;
                particle.style.animationDuration = `${Math.random() * 10 + 10}s`;
                
                container.appendChild(particle);
            }
        });
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值