可以根据自由发挥进行修改,
<!DOCTYPE html>
<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>