姜饼人动画特效

已于 2025-06-27 13:36:58 修改
阅读量288 收藏 9
点赞数 5
CC 4.0 BY-SA版权
文章标签： css 前端 css3
于 2025-06-04 14:12:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148426048

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姜饼人动画特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f5e8d0;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        
        .container {
            position: relative;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(to bottom, #f5e8d0, #e8c9a7);
        }
        
        .gingerbread-man {
            position: absolute;
            width: 100px;
            height: 150px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150"><circle cx="50" cy="30" r="20" fill="%23d2691e"/><path d="M30,50 Q50,70 70,50 Q80,80 70,110 Q60,140 50,145 Q40,140 30,110 Q20,80 30,50" fill="%23d2691e"/><circle cx="40" cy="25" r="3" fill="%23000"/><circle cx="60" cy="25" r="3" fill="%23000"/><path d="M45,35 Q50,40 55,35" stroke="%23000" fill="transparent" stroke-width="2"/></svg>');
            background-repeat: no-repeat;
            animation: bounce 2s infinite alternate;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        @keyframes bounce {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                transform: translate(-50%, -60%) scale(1.05);
            }
        }
        
        .cookie {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="15" cy="15" r="14" fill="%23a0522d" stroke="%238b4513" stroke-width="1"/><circle cx="10" cy="10" r="2" fill="%23fff"/><circle cx="20" cy="8" r="1.5" fill="%23fff"/><circle cx="15" cy="20" r="1.5" fill="%23fff"/><circle cx="22" cy="15" r="1" fill="%23fff"/></svg>');
            background-repeat: no-repeat;
            opacity: 0;
        }
        
        .title {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: #8b4513;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            animation: titleColor 5s infinite alternate;
        }
        
        @keyframes titleColor {
            0% { color: #8b4513; }
            50% { color: #d2691e; }
            100% { color: #a0522d; }
        }
        
        .footer {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
            color: #8b4513;
            font-size: 0.8em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">快乐的姜饼人</h1>
        <div class="gingerbread-man" id="gingerbread"></div>
        <div class="footer">
            <p>姜饼人动画特效 | 祝你有个愉快的一天！</p>

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const gingerbread = document.getElementById('gingerbread');
            const container = document.querySelector('.container');
            
            // 让姜饼人可以拖动
            let isDragging = false;
            let offsetX, offsetY;
            
            gingerbread.addEventListener('mousedown', function(e) {
                isDragging = true;
                offsetX = e.clientX - gingerbread.getBoundingClientRect().left;
                offsetY = e.clientY - gingerbread.getBoundingClientRect().top;
                gingerbread.style.cursor = 'grabbing';
                gingerbread.style.animation = 'none';
            });
            
            document.addEventListener('mousemove', function(e) {
                if (!isDragging) return;
                
                const x = e.clientX - offsetX;
                const y = e.clientY - offsetY;
                
                gingerbread.style.left = x + 'px';
                gingerbread.style.top = y + 'px';
                gingerbread.style.transform = 'none';
                
                // 随机创建饼干
                if (Math.random() < 0.1) {
                    createCookie(x, y);
                }
            });
            
            document.addEventListener('mouseup', function() {
                isDragging = false;
                gingerbread.style.cursor = 'grab';
                gingerbread.style.animation = 'bounce 2s infinite alternate';
            });
            
            function createCookie(x, y) {
                const cookie = document.createElement('div');
                cookie.className = 'cookie';
                cookie.style.left = x + 'px';
                cookie.style.top = y + 'px';
                
                // 随机大小
                const size = 20 + Math.random() * 20;
                cookie.style.width = size + 'px';
                cookie.style.height = size + 'px';
                
                container.appendChild(cookie);
                
                // 动画
                setTimeout(() => {
                    cookie.style.opacity = '1';
                    cookie.style.transition = 'all 1s';
                    cookie.style.transform = `translate(${(Math.random() - 0.5) * 100}px, ${(Math.random() - 0.5) * 100}px) rotate(${Math.random() * 360}deg)`;
                    
                    setTimeout(() => {
                        cookie.style.opacity = '0';
                        setTimeout(() => {
                            container.removeChild(cookie);
                        }, 1000);
                    }, 2000);
                }, 10);
            }
            
            // 自动创建一些饼干
            setInterval(() => {
                if (!isDragging && Math.random() < 0.3) {
                    const rect = gingerbread.getBoundingClientRect();
                    createCookie(rect.left + rect.width/2, rect.top + rect.height/2);
                }
            }, 1000);
        });
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值