分享一个新年html页面代码

可以根据自由发挥进行修改,
1735460806284

<!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>
25 Likes

感谢大佬

1 Like

字体自适应有待优化 :stuck_out_tongue_closed_eyes:

6 Likes

感谢大佬分享,mark

2 Likes

不错,感谢分享

1 Like

很有设计感,谢谢分享。

1 Like

厉害!学习学习!

1 Like

挺有意思的

1 Like

不错不错,感谢楼主分享 :partying_face:

1 Like

感谢楼主的分享,又一个可以用到年会大屏的

@XiaoHuang 这个看起来怎么样,也来看看评价一下吧!

很棒,感谢

这个好这个好! :bili_052:

感谢分享

<!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=Dancing+Script:wght@700&family=Poppins:wght@700;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: 'Dancing Script', cursive;
      font-size: clamp (40px, 10vw, 100px);
      font-weight: 700;
      color: #ffffff;
      text-shadow: 0 0 10px rgba (255, 215, 0, 0.5),
        0 0 20px rgba (255, 215, 0, 0.3);
      text-align: center;
      position: absolute;
      top: 50%;
      opacity: 0;
      z-index: 100;
      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: #00bfff;
        text-shadow: 0 0 15px rgba (0, 191, 255, 0.7);
      }
    }

    @keyframes y2colorful {
      0% {
        color: #fff;
      }

      100% {
        color: #ff1493;
        text-shadow: 0 0 15px rgba (255, 20, 147, 0.7);
      }
    }

    @keyframes y3colorful {
      0% {
        color: #fff;
      }

      100% {
        color: #ffd700;
        text-shadow: 0 0 15px rgba (255, 215, 0, 0.7);
      }
    }

    @keyframes y4colorful {
      0% {
        color: #fff;
      }

      100% {
        color: #ff4500;
        text-shadow: 0 0 15px rgba (255, 69, 0, 0.7);
      }
    }

    .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;
        text-shadow: none;
      }

      40% {
        right: 25%;
        text-shadow: none;
      }

      90% {
        right: 35%;
        text-shadow: none;
      }

      100% {
        right: 35%;
        color: #ffd700;
        text-shadow: 0 0 15px rgba (255, 215, 0, 0.7);
      }
    }

    .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: 25%;
      }

      50% {
        right: 33%;
        top: 50%;
      }

      100% {
        right: 33%;
        top: -200%;
      }
    }

    .firework {
      position: relative;
      opacity: 0;
      animation: show_fireworks 2s ease-in-out 5s forwards;
      z-index: 2;
    }

    @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 = left ? 0.25 : 0.75
      shell.y = 1
      shell.xoff = (0.01 + Math.random () * 0.01) * (left ? 1 : -1)
      shell.yoff = 0.01 + Math.random () * 0.01
      shell.size = Math.random () * 8 + 4
      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 () * Math.PI * 2
        var s = Math.random () * 15

        pas.xoff = s * Math.cos (a)
        pas.yoff = s * Math.sin (a)

        pas.size = Math.random () * shell.size * 0.4

        if (Math.random () > 0.8) {
          pas.color = colors [Math.floor (Math.random () * colors.length)]
        } else {
          pas.color = shell.color
        }

        if (pass.length < 1200) {
          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.fillStyle = 'rgba (0,0,0,0.1)'
      ctx.fillRect (0, 0, cwidth, cheight)

      if (shells.length < 12 && 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.shadowBlur = 10
        ctx.shadowColor = pas.color
        ctx.fillStyle = pas.color
        ctx.fill ()
        ctx.shadowBlur = 0

        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>

我随手给他优化了一下

希望可以在手機版上也正常顯示

太炫了 。

能把4改成穷吗(着急

好看 谢谢佬

想优化一下移动端的浏览方式,但是我发现好像linux.do添加不了图片?