js+css3全屏2023新年快乐动画特效
一款js+css3全屏2023新年快乐动画特效
49 查看详情
代码
Dussehra Animation body { margin: 0; padding: 0; background-color: #0d0d0d; color: white; font-family: 'Arial', sans-serif; overflow: hidden; } #jaiShreeRam, #happyDussehra { font-size: 4rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; animation: glowText 1s infinite alternate; } #jaiShreeRam { opacity: 0; animation: fadeIn 3s forwards, fadeOut 2s 5s forwards; } #happyDussehra { opacity: 0; color: #FFD700; text-shadow: 0 0 20px yellow, 0 0 30px orange, 0 0 40px red; } @keyframes glowText { 0% { text-shadow: 0 0 10px red, 0 0 20px orange, 0 0 30px yellow; } 100% { text-shadow: 0 0 20px yellow, 0 0 30px orange, 0 0 40px red; } } #ravaan { display: none; width: 300px; height: 500px; background: url('https://i.pinimg.com/originals/b8/3c/9f/b83c9fadc3e06c9a39e98088d4402318.png') no-repeat center/cover; position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%); } #ravaan.onFire { animation: fireShadow 2s forwards, disappear 4s 2s forwards; } #arrow { display: none; width: 200px; height: 10px; background-color: #8b4513; position: absolute; top: 55%; left: -200px; border-radius: 5px; animation: moveArrow 5s forwards; } #arrow:before { content: ''; width: 30px; height: 20px; background-color: gray; position: absolute; right: -30px; top: -5px; clip-path: polygon(0 50%, 100% 0, 100% 100%); } #fire { display: none; width: 50px; height: 50px; background: radial-gradient(circle, red, orange, yellow); border-radius: 50%; position: absolute; top: -15px; right: -35px; animation: fireFlicker 0.2s infinite alternate; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes moveArrow { 0% { left: -200px; } 50% { left: 45%; top: 55%; transform: translateX(-50%); } 100% { left: 50%; top: 50%; transform: translateX(-50%) rotate(-45deg); } } @keyframes fireFlicker { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: 0.9; } } @keyframes fireShadow { 0% { box-shadow: 0 0 0px transparent; } 100% { box-shadow: 0 0 30px orange, 0 0 50px red, 0 0 70px yellow; } } @keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes explode { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(5); opacity: 0; } } .cracker { display: none; position: absolute; width: 10px; height: 10px; background-color: yellow; animation: explode 1s forwards; border-radius: 50%; } .cracker:before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, red, orange, yellow); animation: explode 1s forwards; }Jai Shree RamHappy Dussehralet letterIndex = 0; const jaiShreeRam = document.getElementById('jaiShreeRam'); const ravaan = document.getElementById('ravaan'); const arrow = document.getElementById('arrow'); const fire = document.getElementById('fire'); const happyDussehra = document.getElementById('happyDussehra'); function showJaiShreeRam() { const text = "Jai Shree Ram"; let interval = setInterval(() => { if (letterIndex { jaiShreeRam.style.display = 'none'; showRavaan(); }, 2000); } }, 300); } function showRavaan() { ravaan.style.display = 'block'; setTimeout(shootArrow, 2000); } function shootArrow() { arrow.style.display = 'block'; fire.style.display = 'block'; setTimeout(() => { arrow.style.display = 'none'; // Hide the arrow after striking triggerRavaanFire(); }, 4500); // Adjust the timing so the arrow strikes before triggering the fire } function triggerRavaanFire() { ravaan.classList.add('onFire'); // Apply fire effect to Ravan showCrackers(); setTimeout(() => { ravaan.style.display = 'none'; showHappyDussehra(); }, 4000); } function showCrackers() { for (let i = 0; i < 20; i++) { let cracker = document.createElement('div'); cracker.className = 'cracker'; cracker.style.top = `${Math.random() * window.innerHeight}px`; cracker.style.left = `${Math.random() * window.innerWidth}px`; document.body.appendChild(cracker); cracker.style.display = 'block'; cracker.style.backgroundColor = 'orange'; // Firework color } } function showHappyDussehra() { happyDussehra.style.opacity = '1'; } showJaiShreeRam();
以上就是快乐杜谢拉动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/897662.html
微信扫一扫 
支付宝扫一扫 
