HTML + CSS动画实现混搭动画

完整代码

HTML+JS

<div class="parallax-container">
        <div class="parallax-layer parallax-background"></div>
        <div class="parallax-layer">
            <h1>超动态分栏式布局</h1>
            <div class="column-container">
                <div class="column">
                    <h2>未来科技</h2>
                    <img src="/api/placeholder/400/300" alt="未来科技概念图" id="techImage">
                    <p>探索前沿科技，从量子计算到脑机接口，了解塑造未来世界的创新技术。</p>
                    <ul>
                        <li>人工智能与机器学习</li>
                        <li>可再生能源革命</li>
                        <li>太空探索与殖民</li>
                    </ul>
                    <a href="#" class="btn" id="techBtn">深入未来</a>
                </div>
                <div class="column">
                    <h2>数字艺术</h2>
                    <img src="/api/placeholder/400/300" alt="数字艺术作品" id="artImage">
                    <p>融合技术与创意，数字艺术正在重新定义我们对美的理解和艺术的边界。</p>
                    <ul>
                        <li>生成艺术与AI创作</li>
                        <li>虚拟现实艺术体验</li>
                        <li>NFT与数字收藏品</li>
                    </ul>
                    <a href="#" class="btn" id="artBtn">体验艺术</a>
                </div>
                <div class="column">
                    <h2>未来城市</h2>
                    <img src="/api/placeholder/400/300" alt="未来城市概念图" id="cityImage">
                    <p>智能、可持续、宜居，未来城市将如何重塑我们的生活方式和社会结构？</p>
                    <ul>
                        <li>智能交通系统</li>
                        <li>垂直农业与城市绿化</li>
                        <li>自给自足的能源系统</li>
                    </ul>
                    <a href="#" class="btn" id="cityBtn">探索城市</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.btn').forEach(btn => {
            btn.addEventListener('mousemove', (e) => {
                const rect = btn.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                btn.style.setProperty('--x', `${x}px`);
                btn.style.setProperty('--y', `${y}px`);
            });
        });

        document.querySelectorAll('.column').forEach(column => {
            column.addEventListener('mousemove', (e) => {
                const rect = column.getBoundingClientRect();
                const x = (e.clientX - rect.left) / column.offsetWidth;
                const y = (e.clientY - rect.top) / column.offsetHeight;
                const rotateX = (y - 0.5) * 10;
                const rotateY = (x - 0.5) * 10;
                column.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`;
            });

            column.addEventListener('mouseleave', () => {
                column.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
            });
        });

        function changeImage(id) {
            const img = document.getElementById(id);
            img.src = `/api/placeholder/${400 + Math.floor(Math.random() * 100)}/${300 + Math.floor(Math.random() * 100)}`;
        }

        document.getElementById('techBtn').addEventListener('click', (e) => {
            e.preventDefault();
            changeImage('techImage');
        });

        document.getElementById('artBtn').addEventListener('click', (e) => {
            e.preventDefault();
            changeImage('artImage');
        });

        document.getElementById('cityBtn').addEventListener('click', (e) => {
            e.preventDefault();
            changeImage('cityImage');
        });
    </script>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

        :root {
            --primary-color: #00ff00;
            --secondary-color: #ff00ff;
            --background-color: #000000;
            --text-color: #ffffff;
        }

        @keyframes neonPulse {
            0%, 100% { text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); }
            50% { text-shadow: 0 0 20px var(--secondary-color), 0 0 30px var(--secondary-color), 0 0 40px var(--secondary-color); }
        }

        @keyframes rotateIn {
            from { transform: rotateY(90deg) scale(0.5); opacity: 0; }
            to { transform: rotateY(0) scale(1); opacity: 1; }
        }

        @keyframes floatShake {
            0%, 100% { transform: translateY(0) rotate(0); }
            25% { transform: translateY(-10px) rotate(-5deg); }
            75% { transform: translateY(10px) rotate(5deg); }
        }

        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
            overflow-x: hidden;
        }

        .parallax-container {
            perspective: 1px;
            height: 100vh;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .parallax-layer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .parallax-background {
            transform: translateZ(-1px) scale(2);
            background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
        }

        h1 {
            text-align: center;
            color: var(--primary-color);
            font-size: 3em;
            margin: 40px 0;
            animation: neonPulse 2s infinite, floatShake 5s ease-in-out infinite;
        }

        .column-container {
            display: flex;
            gap: 30px;
            padding: 40px;
            perspective: 1000px;
        }

        .column {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            animation: rotateIn 1s forwards;
            opacity: 0;
            transform-style: preserve-3d;
        }

        .column:nth-child(1) { animation-delay: 0.2s; }
        .column:nth-child(2) { animation-delay: 0.4s; }
        .column:nth-child(3) { animation-delay: 0.6s; }

        .column:hover {
            transform: translateY(-20px) rotateY(10deg);
            box-shadow: 0 15px 35px rgba(0, 255, 0, 0.2);
        }

        h2 {
            color: var(--secondary-color);
            border-bottom: 2px solid var(--secondary-color);
            padding-bottom: 10px;
            transition: color 0.3s ease;
        }

        .column:hover h2 {
            color: var(--primary-color);
            text-shadow: 0 0 10px var(--primary-color);
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .column:hover img {
            transform: scale(1.05) rotate(3deg);
        }

        .btn {
            display: inline-block;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: var(--text-color);
            padding: 12px 24px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 20px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 255, 0, 0.4);
        }

        .btn::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(45deg);
            transition: all 0.3s ease;
        }

        .btn:hover::before {
            left: 100%;
        }

        @media (max-width: 768px) {
            .column-container {
                flex-direction: column;
            }
            .column {
                opacity: 1;
                transform: none;
                animation: none;
            }
            .column:hover {
                transform: translateY(-10px);
            }
        }