CSS3切半猕猴桃爱情动画特效

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

#css #css3 #html

于 2025-06-13 13:46:27 首次发布

<!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;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        
        .scene {
            position: relative;
            width: 600px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .kiwi {
            position: relative;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: linear-gradient(to bottom, #8bc34a, #4caf50);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            margin: 0 20px;
            cursor: pointer;
            transition: transform 0.5s;
            z-index: 2;
        }
        
        .kiwi::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            background: #4caf50;
            border-radius: 50%;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
        }
        
        .kiwi::after {
            content: '';
            position: absolute;
            top: 30px;
            left: 30px;
            right: 30px;
            bottom: 30px;
            background: #f8bbd0;
            border-radius: 50%;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        }
        
        .seeds {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        
        .seed {
            position: absolute;
            width: 5px;
            height: 5px;
            background: #000;
            border-radius: 50%;
        }
        
        .kiwi-left {
            transform-origin: right center;
            animation: float-left 3s ease-in-out infinite;
        }
        
        .kiwi-right {
            transform-origin: left center;
            animation: float-right 3s ease-in-out infinite;
        }
        
        .heart {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #ff4081;
            transform: rotate(45deg);
            opacity: 0;
            z-index: 1;
            animation: heart-beat 2s ease infinite;
        }
        
        .heart::before, .heart::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            background: #ff4081;
            border-radius: 50%;
        }
        
        .heart::before {
            top: -50px;
            left: 0;
        }
        
        .heart::after {
            top: 0;
            left: -50px;
        }
        
        .title {
            position: absolute;
            top: 50px;
            color: white;
            font-size: 28px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        
        .link {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: white;
            font-size: 14px;
            text-decoration: none;
            font-weight: bold;
        }
        
        @keyframes float-left {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(-5deg); }
        }
        
        @keyframes float-right {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        @keyframes heart-beat {
            0% { transform: rotate(45deg) scale(0.8); opacity: 0; }
            50% { transform: rotate(45deg) scale(1.2); opacity: 0.8; }
            100% { transform: rotate(45deg) scale(0.8); opacity: 0; }
        }
        
        .scene:hover .kiwi-left {
            animation: split-left 1s forwards;
        }
        
        .scene:hover .kiwi-right {
            animation: split-right 1s forwards;
        }
        
        .scene:hover .heart {
            animation: heart-beat 1s ease infinite, heart-float 3s ease infinite;
        }
        
        @keyframes split-left {
            0% { transform: translateX(0) rotate(0deg); }
            100% { transform: translateX(-50px) rotate(-20deg); }
        }
        
        @keyframes split-right {
            0% { transform: translateX(0) rotate(0deg); }
            100% { transform: translateX(50px) rotate(20deg); }
        }
        
        @keyframes heart-float {
            0%, 100% { transform: rotate(45deg) translateY(0); }
            50% { transform: rotate(45deg) translateY(-20px); }
        }
    </style>
</head>
<body>
    <div class="scene">
        <h1 class="title">猕猴桃的爱情</h1>
        
        <div class="kiwi kiwi-left">
            <div class="seeds" id="seeds-left"></div>
        </div>
        
        <div class="kiwi kiwi-right">
            <div class="seeds" id="seeds-right"></div>
        </div>
        
        <div class="heart"></div>
        
        
    </div>

    <script>
        // 创建猕猴桃籽
        function createSeeds(container, count) {
            for (let i = 0; i < count; i++) {
                const seed = document.createElement('div');
                seed.className = 'seed';
                
                // 随机位置
                const angle = Math.random() * Math.PI * 2;
                const radius = 30 + Math.random() * 30;
                seed.style.left = `calc(50% + ${Math.cos(angle) * radius}px)`;
                seed.style.top = `calc(50% + ${Math.sin(angle) * radius}px)`;
                
                // 随机大小
                const size = 2 + Math.random() * 3;
                seed.style.width = `${size}px`;
                seed.style.height = `${size}px`;
                
                container.appendChild(seed);
            }
        }
        
        // 为两个猕猴桃添加籽
        createSeeds(document.getElementById('seeds-left'), 30);
        createSeeds(document.getElementById('seeds-right'), 30);
        
        // 添加悬停效果
        const scene = document.querySelector('.scene');
        const kiwis = document.querySelectorAll('.kiwi');
        const heart = document.querySelector('.heart');
        
        scene.addEventListener('mouseenter', () => {
            heart.style.opacity = '0.8';
        });
        
        scene.addEventListener('mouseleave', () => {
            heart.style.opacity = '0';
        });
    </script>
</body>
</html>

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值