Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Happy New Year 2025</title> | |
| </head> | |
| <style> | |
| @import url("https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&family=Poppins:wght@900&display=swap"); | |
| @import url('https://fonts.googleapis.com/css?family=Montserrat:700|Pacifico'); | |
| *, | |
| *:after, | |
| *:before { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-transition: all 100ms ease-in; | |
| transition: all 100ms ease-in; | |
| } | |
| body { | |
| background-color: #1a1818; | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| .msg { | |
| width: 100%; | |
| font-family: 'Pacifico', cursive; | |
| font-size: 100px; | |
| font-weight: bolder; | |
| color: #fff; | |
| text-align: center; | |
| position: absolute; | |
| top: 50%; | |
| opacity: 0; | |
| animation: message 2s ease-in-out 6s forwards; | |
| } | |
| @keyframes message { | |
| 0% { | |
| opacity: 0; | |
| margin-top: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| margin-top: -200px; | |
| } | |
| } | |
| .y1 { | |
| color: #fff; | |
| animation: y1colorful 2s ease-in-out 5.75s forwards; | |
| } | |
| .y2 { | |
| color: #fff; | |
| animation: y2colorful 2s ease-in-out 5.75s forwards; | |
| } | |
| .y3 { | |
| color: #fff; | |
| animation: y3colorful 2s ease-in-out 5.75s forwards; | |
| } | |
| .y4 { | |
| color: #fff; | |
| animation: y4colorful 2s ease-in-out 5.75s forwards; | |
| } | |
| @keyframes y1colorful { | |
| 0% { | |
| color: #fff; | |
| } | |
| 100% { | |
| color: #10b3ff; | |
| } | |
| } | |
| @keyframes y2colorful { | |
| 0% { | |
| color: #fff; | |
| } | |
| 100% { | |
| color: #07be62; | |
| } | |
| } | |
| @keyframes y3colorful { | |
| 0% { | |
| color: #fff; | |
| } | |
| 100% { | |
| color: #ff8513; | |
| } | |
| } | |
| @keyframes y4colorful { | |
| 0% { | |
| color: #fff; | |
| } | |
| 100% { | |
| color: #fdab14; | |
| } | |
| } | |
| .old { | |
| color: #fff; | |
| position: absolute; | |
| top: 0%; | |
| animation: old_animation 2.5s ease-in-out 4s forwards; | |
| margin-left: -80px; | |
| } | |
| @keyframes old_animation { | |
| 0% { | |
| top: 0%; | |
| } | |
| 100% { | |
| top: -250%; | |
| } | |
| } | |
| .year { | |
| position: absolute; | |
| top: 450px; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .year>span { | |
| font-size: 175px; | |
| font-weight: 700; | |
| font-family: "Poppins", sans-serif; | |
| letter-spacing: -12px; | |
| } | |
| .first_year { | |
| margin-right: 100px; | |
| } | |
| .new { | |
| position: absolute; | |
| right: -100px; | |
| animation: new_animation 5s ease-in-out 1.5s forwards; | |
| } | |
| @keyframes new_animation { | |
| 0% { | |
| right: -100px; | |
| } | |
| 40% { | |
| right: 600px; | |
| } | |
| 90% { | |
| right: 600px; | |
| } | |
| 100% { | |
| right: 720px; | |
| color: yellow; | |
| } | |
| } | |
| .balloon { | |
| width: 100px; | |
| height: 120px; | |
| border-radius: 50%; | |
| background-color: rgb(0, 47, 255); | |
| position: absolute; | |
| top: 50%; | |
| right: -100px; | |
| margin-top: -285px; | |
| animation: balloon_animation 5s ease-in-out 1.5s forwards; | |
| } | |
| .balloon::after { | |
| content: ""; | |
| width: 4px; | |
| height: 100px; | |
| background-color: #fff; | |
| position: absolute; | |
| left: 50%; | |
| margin-left: -2px; | |
| bottom: -100px; | |
| } | |
| .balloon::before { | |
| content: ""; | |
| border-style: solid; | |
| border-width: 0 10px 20px 10px; | |
| border-color: transparent transparent #fd3553 transparent; | |
| position: absolute; | |
| left: 50%; | |
| bottom: -10px; | |
| margin-left: -10px; | |
| } | |
| @keyframes balloon_animation { | |
| 0% { | |
| right: -120px; | |
| } | |
| 40% { | |
| right: 580px; | |
| } | |
| 50% { | |
| right: 740px; | |
| top: 50%; | |
| } | |
| 100% { | |
| right: 740px; | |
| top: -200%; | |
| } | |
| } | |
| .firework { | |
| position: relative; | |
| opacity: 0; | |
| animation: show_fireworks 2s ease-in-out 5s forwards; | |
| } | |
| @keyframes show_fireworks { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 99% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| .cracker { | |
| position: absolute; | |
| width: 4px; | |
| height: 80px; | |
| transform-origin: 50% 100%; | |
| overflow: hidden; | |
| } | |
| .cracker::before { | |
| content: ''; | |
| background-color: gold; | |
| height: 40px; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| animation: fire 2s ease-in-out infinite; | |
| } | |
| @keyframes fire { | |
| 0% { | |
| top: 100%; | |
| } | |
| 25% { | |
| top: 50%; | |
| } | |
| 50% { | |
| top: -25%; | |
| } | |
| 75% { | |
| top: -50%; | |
| } | |
| 100% { | |
| top: -50%; | |
| } | |
| } | |
| .cracker:nth-child(1) { | |
| transform: rotate(0deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(2) { | |
| transform: rotate(30deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(3) { | |
| transform: rotate(60deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(4) { | |
| transform: rotate(90deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(5) { | |
| transform: rotate(120deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(6) { | |
| transform: rotate(150deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(7) { | |
| transform: rotate(180deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(8) { | |
| transform: rotate(210deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(9) { | |
| transform: rotate(240deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(10) { | |
| transform: rotate(270deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(11) { | |
| transform: rotate(300deg) translateY(-15px); | |
| } | |
| .cracker:nth-child(12) { | |
| transform: rotate(330deg) translateY(-15px); | |
| } | |
| #firework1 { | |
| left: 25%; | |
| top: 50%; | |
| transform: scale(1); | |
| } | |
| #firework2 { | |
| left: 50%; | |
| top: 75%; | |
| transform: scale(0.5); | |
| } | |
| #firework3 { | |
| left: 80%; | |
| top: 15%; | |
| transform: scale(1.5); | |
| } | |
| canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| </style> | |
| <body> | |
| <canvas id="Canvas"></canvas> | |
| <div class="msg">新年快乐</div> | |
| <div class="year"> | |
| <span class="first_year"> | |
| <span class="y1">2</span> | |
| <span class="y2">0</span> | |
| <span class="y3">2</span> | |
| </span> | |
| <span class="old">4</span> | |
| <span class="y4 new">5</span> | |
| <div class="balloon"></div> | |
| </div> | |
| <div class="firework" id="firework1"> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| </div> | |
| <div class="firework" id="firework2"> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| </div> | |
| <div class="firework" id="firework3"> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| <div class="cracker"></div> | |
| </div> | |
| </body> | |
| <script> | |
| var c = document.getElementById("Canvas"); | |
| var ctx = c.getContext("2d"); | |
| var cwidth, cheight; | |
| var shells = []; | |
| var pass= []; | |
| var colors = ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41', '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40']; | |
| window.onresize = function() { reset(); } | |
| reset(); | |
| function reset() { | |
| cwidth = window.innerWidth; | |
| cheight = window.innerHeight; | |
| c.width = cwidth; | |
| c.height = cheight; | |
| } | |
| function newShell() { | |
| var left = (Math.random() > 0.5); | |
| var shell = {}; | |
| shell.x = (1*left); | |
| shell.y = 1; | |
| shell.xoff = (0.01 + Math.random() * 0.007) * (left ? 1 : -1); | |
| shell.yoff = 0.01 + Math.random() * 0.007; | |
| shell.size = Math.random() * 6 + 3; | |
| shell.color = colors[Math.floor(Math.random() * colors.length)]; | |
| shells.push(shell); | |
| } | |
| function newPass(shell) { | |
| var pasCount = Math.ceil(Math.pow(shell.size, 2) * Math.PI); | |
| for (i = 0; i < pasCount; i++) { | |
| var pas = {}; | |
| pas.x = shell.x * cwidth; | |
| pas.y = shell.y * cheight; | |
| var a = Math.random() * 4; | |
| var s = Math.random() * 10; | |
| pas.xoff = s * Math.sin((5 - a) * (Math.PI / 2)); | |
| pas.yoff = s * Math.sin(a * (Math.PI / 2)); | |
| pas.color = shell.color; | |
| pas.size = Math.sqrt(shell.size); | |
| if (pass.length < 1000) { pass.push(pas); } | |
| } | |
| } | |
| var lastRun = 0; | |
| Run(); | |
| function Run() { | |
| var dt = 1; | |
| if (lastRun != 0) { dt = Math.min(50, (performance.now() - lastRun)); } | |
| lastRun = performance.now(); | |
| //ctx.clearRect(0, 0, cwidth, cheight); | |
| ctx.fillStyle = "rgba(0,0,0,0.25)"; | |
| ctx.fillRect(0, 0, cwidth, cheight); | |
| if ((shells.length < 10) && (Math.random() > 0.96)) { newShell(); } | |
| for (let ix in shells) { | |
| var shell = shells[ix]; | |
| ctx.beginPath(); | |
| ctx.arc(shell.x * cwidth, shell.y * cheight, shell.size, 0, 2 * Math.PI); | |
| ctx.fillStyle = shell.color; | |
| ctx.fill(); | |
| shell.x -= shell.xoff; | |
| shell.y -= shell.yoff; | |
| shell.xoff -= (shell.xoff * dt * 0.001); | |
| shell.yoff -= ((shell.yoff + 0.2) * dt * 0.00005); | |
| if (shell.yoff < -0.005) { | |
| newPass(shell); | |
| shells.splice(ix, 1); | |
| } | |
| } | |
| for (let ix in pass) { | |
| var pas = pass[ix]; | |
| ctx.beginPath(); | |
| ctx.arc(pas.x, pas.y, pas.size, 0, 2 * Math.PI); | |
| ctx.fillStyle = pas.color; | |
| ctx.fill(); | |
| pas.x -= pas.xoff; | |
| pas.y -= pas.yoff; | |
| pas.xoff -= (pas.xoff * dt * 0.001); | |
| pas.yoff -= ((pas.yoff + 5) * dt * 0.0005); | |
| pas.size -= (dt * 0.002 * Math.random()) | |
| if ((pas.y > cheight) || (pas.y < -50) || (pas.size <= 0)) { | |
| pass.splice(ix, 1); | |
| } | |
| } | |
| requestAnimationFrame(Run); | |
| } | |
| </script> | |
| </html> |