贡献一个摇摆灯笼和烟花绽放素材

最近论坛内好多佬都在搞跨年倒计时网页
做了两个素材,没准大家能用上(C3.5做的)
1.摇摆灯笼

a8qpd-wfhco

代码:


                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
							<style>
								body {
									background-color: white; /* Ensure the iframe has a white background */
								}

								
        body {
            background-color: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .anchor-point {
            position: relative;
            width: 1px;
            height: 1px;
            top: -150px;
        }

        .anchor-point.second {
            left: -80px;
            top: -180px;
        }

        .string-and-lantern {
            position: absolute;
            transform-origin: top left;
            animation: swingInWind 4s ease-in-out infinite;
        }

        .string-and-lantern.second {
            animation: swingInWind 4s ease-in-out infinite 0.5s; /* 错开动画时间 */
        }

        .curved-string {
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 120px;
            background-color: #8B4513;
            transform-origin: top;
        }

        .lantern {
            position: absolute;
            top: 115px;
            left: -75px;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle at center, #ff3333 0%, #ff0000 50%, #cc0000 100%);
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
        }

        .lantern::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 30px;
            background-color: #8B4513;
            border-radius: 10px 10px 0 0;
        }

        .lantern::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 30px;
            background-color: #8B4513;
            border-radius: 0 0 10px 10px;
        }

        .light {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, rgba(255,255,0,0.7) 0%, rgba(255,165,0,0.3) 100%);
            border-radius: 50%;
            animation: flicker 1s infinite alternate;
        }

        .light.second {
            animation: flicker 1s infinite alternate 0.5s;
        }

        .tassels {
            position: absolute;
            bottom: -50px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 50px;
            display: flex;
            justify-content: space-around;
        }

        .tassel {
            width: 2px;
            height: 100%;
            background-color: #FFD700;
            position: relative;
            transform-origin: top;
            animation: tasselWave 2s ease-in-out infinite;
        }

        .second .tassel {
            animation-delay: 0.5s;
        }

        .tassel:nth-child(2) { animation-delay: 0.2s; }
        .tassel:nth-child(3) { animation-delay: 0.4s; }
        .tassel:nth-child(4) { animation-delay: 0.6s; }
        .tassel:nth-child(5) { animation-delay: 0.8s; }

        @keyframes swingInWind {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(15deg); }
            100% { transform: rotate(0deg); }
        }

        @keyframes flicker {
            0% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        @keyframes tasselWave {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(8deg) translateX(2px); }
        }
    

							</style>
                        </head>
                        <body>
                            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>微风中的红灯笼</title>
    <style>
        body {
            background-color: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .anchor-point {
            position: relative;
            width: 1px;
            height: 1px;
            top: -150px;
        }

        .anchor-point.second {
            left: -80px;
            top: -180px;
        }

        .string-and-lantern {
            position: absolute;
            transform-origin: top left;
            animation: swingInWind 4s ease-in-out infinite;
        }

        .string-and-lantern.second {
            animation: swingInWind 4s ease-in-out infinite 0.5s; /* 错开动画时间 */
        }

        .curved-string {
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 120px;
            background-color: #8B4513;
            transform-origin: top;
        }

        .lantern {
            position: absolute;
            top: 115px;
            left: -75px;
            width: 150px;
            height: 150px;
            background: radial-gradient(circle at center, #ff3333 0%, #ff0000 50%, #cc0000 100%);
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
        }

        .lantern::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 30px;
            background-color: #8B4513;
            border-radius: 10px 10px 0 0;
        }

        .lantern::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 30px;
            background-color: #8B4513;
            border-radius: 0 0 10px 10px;
        }

        .light {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, rgba(255,255,0,0.7) 0%, rgba(255,165,0,0.3) 100%);
            border-radius: 50%;
            animation: flicker 1s infinite alternate;
        }

        .light.second {
            animation: flicker 1s infinite alternate 0.5s;
        }

        .tassels {
            position: absolute;
            bottom: -50px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 50px;
            display: flex;
            justify-content: space-around;
        }

        .tassel {
            width: 2px;
            height: 100%;
            background-color: #FFD700;
            position: relative;
            transform-origin: top;
            animation: tasselWave 2s ease-in-out infinite;
        }

        .second .tassel {
            animation-delay: 0.5s;
        }

        .tassel:nth-child(2) { animation-delay: 0.2s; }
        .tassel:nth-child(3) { animation-delay: 0.4s; }
        .tassel:nth-child(4) { animation-delay: 0.6s; }
        .tassel:nth-child(5) { animation-delay: 0.8s; }

        @keyframes swingInWind {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(15deg); }
            100% { transform: rotate(0deg); }
        }

        @keyframes flicker {
            0% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        @keyframes tasselWave {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(8deg) translateX(2px); }
        }
    </style>
</head>
<body>
    <div class="anchor-point">
        <div class="string-and-lantern">
            <div class="curved-string"></div>
            <div class="lantern">
                <div class="light"></div>
                <div class="tassels">
                    <div class="tassel"></div>
                    <div class="tassel"></div>
                    <div class="tassel"></div>
                    <div class="tassel"></div>
                    <div class="tassel"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="anchor-point second">
        <div class="string-and-lantern second">
            <div class="curved-string"></div>
            <div class="lantern">
                <div class="light second"></div>
                <div class="tassels">
                    <div class="tassel"></div>
                    <div class="tassel"></div>
                    <div class="tassel"></div>
                    <div class="tassel"></div>
                    <div class="tassel"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>



							<script>
                            	
							</script>
                        </body>
                        </html>
                    

2.烟花特效(有些丑,可能需要再优化)
VID_20241230_114236 (1)

代码:


                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
							<style>
								body {
									background-color: white; /* Ensure the iframe has a white background */
								}

								
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 50%;
            pointer-events: none;
        }

        .rocket {
            position: absolute;
            width: 3px;
            height: 8px;
            background: #ff9;
            box-shadow: 0 0 6px #ff9;
            pointer-events: none;
        }
    

							</style>
                        </head>
                        <body>
                            <!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 50%;
            pointer-events: none;
        }

        .rocket {
            position: absolute;
            width: 3px;
            height: 8px;
            background: #ff9;
            box-shadow: 0 0 6px #ff9;
            pointer-events: none;
        }
    </style>
</head>
<body onclick="launchFirework(event)">
    <script>
        let particles = [];
        const maxParticles = 1000; // 增加最大粒子数
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();

        function createLaunchSound() {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.8); // 延长音效
            
            oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.8);
            
            oscillator.start();
            oscillator.stop(audioContext.currentTime + 0.8);
        }

        function createExplosionSound() {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
            
            oscillator.frequency.setValueAtTime(200, audioContext.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(100, audioContext.currentTime + 0.3);
            
            oscillator.start();
            oscillator.stop(audioContext.currentTime + 0.3);
        }

        function launchFirework(event) {
            const startX = event.clientX;
            const startY = window.innerHeight;
            const targetY = event.clientY;
            
            const rocket = document.createElement('div');
            rocket.className = 'rocket';
            document.body.appendChild(rocket);
            
            createLaunchSound();
            
            let progress = 0;
            const animateRocket = () => {
                progress += 0.01; // 降低升空速度
                
                if (progress >= 1) {
                    rocket.remove();
                    createFirework(startX, targetY);
                    return;
                }
                
                const currentY = startY - (startY - targetY) * progress;
                rocket.style.transform = `translate(${startX}px, ${currentY}px)`;
                requestAnimationFrame(animateRocket);
            };
            
            animateRocket();
        }

        function createFirework(x, y) {
            if (particles.length > maxParticles) return;
            
            createExplosionSound();

            const particleCount = 100; // 增加每个烟花的粒子数
            const spread = 360;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                const angle = (Math.random() * spread - spread/2) * (Math.PI/180);
                const velocity = 2 + Math.random() * 4; // 降低粒子速度
                
                const vx = Math.cos(angle) * velocity;
                const vy = Math.sin(angle) * velocity;
                
                const colors = ['#ff0', '#f0f', '#0ff', '#f00', '#0f0', '#ff8', '#f8f']; // 增加颜色
                particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                
                document.body.appendChild(particle);
                
                const particleObj = {
                    element: particle,
                    x: x,
                    y: y,
                    vx: vx,
                    vy: vy,
                    life: 1.5 // 延长粒子生命周期
                };
                
                particles.push(particleObj);
            }
        }

        function updateParticles() {
            for (let i = particles.length - 1; i >= 0; i--) {
                const particle = particles[i];
                
                if (particle.life <= 0) {
                    particle.element.remove();
                    particles.splice(i, 1);
                    continue;
                }
                
                particle.vy += 0.05; // 降低重力影响
                particle.x += particle.vx;
                particle.y += particle.vy;
                
                particle.vx *= 0.99;
                particle.vy *= 0.99;
                
                particle.life -= 0.01; // 降低消散速度
                
                particle.element.style.transform = 
                    `translate(${particle.x}px, ${particle.y}px)`;
                particle.element.style.opacity = particle.life;
            }
            
            requestAnimationFrame(updateParticles);
        }
        
        updateParticles();
        
        // 自动发射多个烟花
        function autoLaunchFireworks() {
            const fireworkCount = 2 + Math.floor(Math.random() * 3); // 每次发射2-4个烟花
            
            for(let i = 0; i < fireworkCount; i++) {
                setTimeout(() => {
                    if (particles.length < maxParticles) {
                        launchFirework({
                            clientX: Math.random() * window.innerWidth,
                            clientY: window.innerHeight * 0.2 + Math.random() * window.innerHeight * 0.4
                        });
                    }
                }, i * 300); // 每个烟花间隔300ms发射
            }
        }

        setInterval(autoLaunchFireworks, 3000); // 每3秒发射一组烟花

        // 初始化音频
        document.addEventListener('click', () => {
            if (audioContext.state === 'suspended') {
                audioContext.resume();
            }
        }, { once: true });
    </script>
</body>
</html>


<head>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #fff;
            border-radius: 50%;
            pointer-events: none;
        }

        .rocket {
            position: absolute;
            width: 3px;
            height: 8px;
            background: #ff9;
            box-shadow: 0 0 6px #ff9;
            pointer-events: none;
        }
    </style>
</head>
<body onclick="launchFirework(event)">
    <script>
        let particles = [];
        const maxParticles = 1000; // 增加最大粒子数
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();

        function createLaunchSound() {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.8); // 延长音效
            
            oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.8);
            
            oscillator.start();
            oscillator.stop(audioContext.currentTime + 0.8);
        }

        function createExplosionSound() {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
            
            oscillator.frequency.setValueAtTime(200, audioContext.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(100, audioContext.currentTime + 0.3);
            
            oscillator.start();
            oscillator.stop(audioContext.currentTime + 0.3);
        }

        function launchFirework(event) {
            const startX = event.clientX;
            const startY = window.innerHeight;
            const targetY = event.clientY;
            
            const rocket = document.createElement('div');
            rocket.className = 'rocket';
            document.body.appendChild(rocket);
            
            createLaunchSound();
            
            let progress = 0;
            const animateRocket = () => {
                progress += 0.01; // 降低升空速度
                
                if (progress >= 1) {
                    rocket.remove();
                    createFirework(startX, targetY);
                    return;
                }
                
                const currentY = startY - (startY - targetY) * progress;
                rocket.style.transform = `translate(${startX}px, ${currentY}px)`;
                requestAnimationFrame(animateRocket);
            };
            
            animateRocket();
        }

        function createFirework(x, y) {
            if (particles.length > maxParticles) return;
            
            createExplosionSound();

            const particleCount = 100; // 增加每个烟花的粒子数
            const spread = 360;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                const angle = (Math.random() * spread - spread/2) * (Math.PI/180);
                const velocity = 2 + Math.random() * 4; // 降低粒子速度
                
                const vx = Math.cos(angle) * velocity;
                const vy = Math.sin(angle) * velocity;
                
                const colors = ['#ff0', '#f0f', '#0ff', '#f00', '#0f0', '#ff8', '#f8f']; // 增加颜色
                particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                
                document.body.appendChild(particle);
                
                const particleObj = {
                    element: particle,
                    x: x,
                    y: y,
                    vx: vx,
                    vy: vy,
                    life: 1.5 // 延长粒子生命周期
                };
                
                particles.push(particleObj);
            }
        }

        function updateParticles() {
            for (let i = particles.length - 1; i >= 0; i--) {
                const particle = particles[i];
                
                if (particle.life <= 0) {
                    particle.element.remove();
                    particles.splice(i, 1);
                    continue;
                }
                
                particle.vy += 0.05; // 降低重力影响
                particle.x += particle.vx;
                particle.y += particle.vy;
                
                particle.vx *= 0.99;
                particle.vy *= 0.99;
                
                particle.life -= 0.01; // 降低消散速度
                
                particle.element.style.transform = 
                    `translate(${particle.x}px, ${particle.y}px)`;
                particle.element.style.opacity = particle.life;
            }
            
            requestAnimationFrame(updateParticles);
        }
        
        updateParticles();
        
        // 自动发射多个烟花
        function autoLaunchFireworks() {
            const fireworkCount = 2 + Math.floor(Math.random() * 3); // 每次发射2-4个烟花
            
            for(let i = 0; i < fireworkCount; i++) {
                setTimeout(() => {
                    if (particles.length < maxParticles) {
                        launchFirework({
                            clientX: Math.random() * window.innerWidth,
                            clientY: window.innerHeight * 0.2 + Math.random() * window.innerHeight * 0.4
                        });
                    }
                }, i * 300); // 每个烟花间隔300ms发射
            }
        }

        setInterval(autoLaunchFireworks, 3000); // 每3秒发射一组烟花

        // 初始化音频
        document.addEventListener('click', () => {
            if (audioContext.state === 'suspended') {
                audioContext.resume();
            }
        }, { once: true });
    </script>
</body>



							<script>
                            	
        let particles = [];
        const maxParticles = 1000; // 增加最大粒子数
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();

        function createLaunchSound() {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.8); // 延长音效
            
            oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.8);
            
            oscillator.start();
            oscillator.stop(audioContext.currentTime + 0.8);
        }

        function createExplosionSound() {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
            
            oscillator.frequency.setValueAtTime(200, audioContext.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(100, audioContext.currentTime + 0.3);
            
            oscillator.start();
            oscillator.stop(audioContext.currentTime + 0.3);
        }

        function launchFirework(event) {
            const startX = event.clientX;
            const startY = window.innerHeight;
            const targetY = event.clientY;
            
            const rocket = document.createElement('div');
            rocket.className = 'rocket';
            document.body.appendChild(rocket);
            
            createLaunchSound();
            
            let progress = 0;
            const animateRocket = () => {
                progress += 0.01; // 降低升空速度
                
                if (progress >= 1) {
                    rocket.remove();
                    createFirework(startX, targetY);
                    return;
                }
                
                const currentY = startY - (startY - targetY) * progress;
                rocket.style.transform = `translate(${startX}px, ${currentY}px)`;
                requestAnimationFrame(animateRocket);
            };
            
            animateRocket();
        }

        function createFirework(x, y) {
            if (particles.length > maxParticles) return;
            
            createExplosionSound();

            const particleCount = 100; // 增加每个烟花的粒子数
            const spread = 360;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                const angle = (Math.random() * spread - spread/2) * (Math.PI/180);
                const velocity = 2 + Math.random() * 4; // 降低粒子速度
                
                const vx = Math.cos(angle) * velocity;
                const vy = Math.sin(angle) * velocity;
                
                const colors = ['#ff0', '#f0f', '#0ff', '#f00', '#0f0', '#ff8', '#f8f']; // 增加颜色
                particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                
                document.body.appendChild(particle);
                
                const particleObj = {
                    element: particle,
                    x: x,
                    y: y,
                    vx: vx,
                    vy: vy,
                    life: 1.5 // 延长粒子生命周期
                };
                
                particles.push(particleObj);
            }
        }

        function updateParticles() {
            for (let i = particles.length - 1; i >= 0; i--) {
                const particle = particles[i];
                
                if (particle.life <= 0) {
                    particle.element.remove();
                    particles.splice(i, 1);
                    continue;
                }
                
                particle.vy += 0.05; // 降低重力影响
                particle.x += particle.vx;
                particle.y += particle.vy;
                
                particle.vx *= 0.99;
                particle.vy *= 0.99;
                
                particle.life -= 0.01; // 降低消散速度
                
                particle.element.style.transform = 
                    `translate(${particle.x}px, ${particle.y}px)`;
                particle.element.style.opacity = particle.life;
            }
            
            requestAnimationFrame(updateParticles);
        }
        
        updateParticles();
        
        // 自动发射多个烟花
        function autoLaunchFireworks() {
            const fireworkCount = 2 + Math.floor(Math.random() * 3); // 每次发射2-4个烟花
            
            for(let i = 0; i < fireworkCount; i++) {
                setTimeout(() => {
                    if (particles.length < maxParticles) {
                        launchFirework({
                            clientX: Math.random() * window.innerWidth,
                            clientY: window.innerHeight * 0.2 + Math.random() * window.innerHeight * 0.4
                        });
                    }
                }, i * 300); // 每个烟花间隔300ms发射
            }
        }

        setInterval(autoLaunchFireworks, 3000); // 每3秒发射一组烟花

        // 初始化音频
        document.addEventListener('click', () => {
            if (audioContext.state === 'suspended') {
                audioContext.resume();
            }
        }, { once: true });
    

							</script>
                        </body>
                        </html>
                    
5 个赞

太强了。

2 个赞

前端大佬来了!

太强了!

此话题已在最后回复的 30 天后被自动关闭。不再允许新回复。