小熊拉手CSS3情人节动画特效

原创 已于 2025-06-27 11:27:50 修改 · 754 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

于 2025-06-14 13:30:10 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小熊拉手CSS3情人节动画特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #ffebee;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

        .scene {
            position: relative;
            width: 100%;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bear-couple {
            position: relative;
            width: 500px;
            height: 300px;
            display: flex;
            justify-content: space-between;
        }

        .bear {
            position: relative;
            width: 180px;
            height: 250px;
        }

        .bear-body {
            position: absolute;
            width: 120px;
            height: 150px;
            background: #8d6e63;
            border-radius: 60px 60px 50px 50px;
            bottom: 0;
        }

        .bear.left .bear-body {
            left: 0;
        }

        .bear.right .bear-body {
            right: 0;
        }

        .bear-head {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #8d6e63;
            border-radius: 50%;
            top: 0;
        }

        .bear.left .bear-head {
            left: 40px;
            animation: head-tilt-left 3s ease-in-out infinite;
        }

        .bear.right .bear-head {
            right: 40px;
            animation: head-tilt-right 3s ease-in-out infinite;
        }

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

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

        .ear {
            position: absolute;
            width: 40px;
            height: 40px;
            background: #6d4c41;
            border-radius: 50%;
            top: -10px;
        }

        .bear.left .ear.left {
            left: 10px;
        }

        .bear.left .ear.right {
            right: 10px;
        }

        .bear.right .ear.left {
            left: 10px;
        }

        .bear.right .ear.right {
            right: 10px;
        }

        .eye {
            position: absolute;
            width: 15px;
            height: 15px;
            background: #3e2723;
            border-radius: 50%;
            top: 40px;
        }

        .bear.left .eye.left {
            left: 30px;
        }

        .bear.left .eye.right {
            right: 30px;
        }

        .bear.right .eye.left {
            left: 30px;
        }

        .bear.right .eye.right {
            right: 30px;
        }

        .nose {
            position: absolute;
            width: 20px;
            height: 15px;
            background: #3e2723;
            border-radius: 50%;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
        }

        .mouth {
            position: absolute;
            width: 30px;
            height: 10px;
            border-bottom: 3px solid #3e2723;
            border-radius: 0 0 50% 50%;
            top: 75px;
            left: 50%;
            transform: translateX(-50%);
        }

        .arm {
            position: absolute;
            width: 50px;
            height: 80px;
            background: #6d4c41;
            border-radius: 25px;
            bottom: 50px;
        }

        .bear.left .arm {
            right: -20px;
            transform-origin: top center;
            animation: arm-swing-left 3s ease-in-out infinite;
        }

        .bear.right .arm {
            left: -20px;
            transform-origin: top center;
            animation: arm-swing-right 3s ease-in-out infinite;
        }

        @keyframes arm-swing-left {
            0%, 100% {
                transform: rotate(20deg);
            }
            50% {
                transform: rotate(-10deg);
            }
        }

        @keyframes arm-swing-right {
            0%, 100% {
                transform: rotate(-20deg);
            }
            50% {
                transform: rotate(10deg);
            }
        }

        .hand {
            position: absolute;
            width: 30px;
            height: 25px;
            background: #6d4c41;
            border-radius: 50%;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .connecting-hearts {
            position: absolute;
            width: 140px;
            height: 60px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .heart {
            position: relative;
            width: 40px;
            height: 40px;
            background: #e91e63;
            transform: rotate(45deg);
            animation: heart-beat 1.5s ease infinite;
        }

        .heart:before,
        .heart:after {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            background: #e91e63;
            border-radius: 50%;
        }

        .heart:before {
            top: -20px;
            left: 0;
        }

        .heart:after {
            top: 0;
            left: -20px;
        }

        @keyframes heart-beat {
            0%, 100% {
                transform: rotate(45deg) scale(1);
            }
            50% {
                transform: rotate(45deg) scale(1.2);
            }
        }

        .heart-connector {
            position: absolute;
            width: 60px;
            height: 10px;
            background: #e91e63;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .floating-hearts {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
        }

        .floating-heart {
            position: absolute;
            opacity: 0;
            animation: float-up 4s linear forwards;
        }

        @keyframes float-up {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(-300px) rotate(360deg);
                opacity: 0;
            }
        }

        .message {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            color: #e91e63;
            text-align: center;
            opacity: 0;
            animation: fade-in 2s ease 1s forwards;
        }

        @keyframes fade-in {
            to {
                opacity: 1;
            }
        }

        .hidden-link {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(0, 0, 0, 0.3);
            font-size: 12px;
            text-decoration: none;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div class="scene">
        <div class="bear-couple">
            <div class="bear left">
                <div class="bear-body"></div>
                <div class="bear-head">
                    <div class="ear left"></div>
                    <div class="ear right"></div>
                    <div class="eye left"></div>
                    <div class="eye right"></div>
                    <div class="nose"></div>
                    <div class="mouth"></div>
                </div>
                <div class="arm">
                    <div class="hand"></div>
                </div>
            </div>
            <div class="bear right">
                <div class="bear-body"></div>
                <div class="bear-head">
                    <div class="ear left"></div>
                    <div class="ear right"></div>
                    <div class="eye left"></div>
                    <div class="eye right"></div>
                    <div class="nose"></div>
                    <div class="mouth"></div>
                </div>
                <div class="arm">
                    <div class="hand"></div>
                </div>
            </div>
            <div class="connecting-hearts">
                <div class="heart"></div>
                <div class="heart-connector"></div>
                <div class="heart"></div>
            </div>
        </div>
        <div class="floating-hearts" id="floating-hearts"></div>
        <div class="message">情人节快乐！<br>永远在一起</div>
    </div>

    <script>
        const floatingHearts = document.getElementById('floating-hearts');
        
        // 创建漂浮的心形
        function createFloatingHearts() {
            for (let i = 0; i < 10; i++) {
                setTimeout(() => {
                    const heart = document.createElement('div');
                    heart.classList.add('floating-heart');
                    
                    // 随机大小
                    const size = Math.random() * 30 + 20;
                    heart.style.width = `${size}px`;
                    heart.style.height = `${size}px`;
                    
                    // 随机位置
                    heart.style.left = `${Math.random() * 100}%`;
                    heart.style.bottom = '0';
                    
                    // 随机颜色
                    const colors = ['#e91e63', '#ff4081', '#f50057', '#ff80ab'];
                    heart.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                    
                    // 随机动画持续时间
                    const duration = Math.random() * 3 + 2;
                    heart.style.animationDuration = `${duration}s`;
                    
                    // 旋转心形
                    heart.style.transform = `rotate(45deg)`;
                    
                    floatingHearts.appendChild(heart);
                    
                    // 动画结束后移除
                    setTimeout(() => {
                        heart.remove();
                    }, duration * 1000);
                }, i * 500);
            }
        }
        
        // 初始创建漂浮心形
        createFloatingHearts();
        
        // 每隔一段时间创建新的漂浮心形
        setInterval(createFloatingHearts, 3000);
        
        // 添加CSS动画关键帧
        const style = document.createElement('style');
        style.textContent = `
            .floating-heart:before, .floating-heart:after {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: inherit;
                border-radius: 50%;
            }
            .floating-heart:before {
                top: -50%;
                left: 0;
            }
            .floating-heart:after {
                top: 0;
                left: -50%;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>

ziblog
关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值