圣诞树代码集锦(二)(4套圣诞树源代码)

圣诞树代码集锦(二)(4套圣诞树源代码)

本文目录:

一、样式:飘落雪花+闪灯式圣诞树(HTML+CSS)

二、样式:圣诞树和礼物盒(HTML+CSS)

三、样式:飘落雪花+闪烁圣诞树+音乐

四、样式:动态线条圣诞树


一、样式:飘落雪花+闪灯式圣诞树(HTML+CSS)

语言:html+css

作者:请原创作者留言,我好更新该代码的原创作者信息

 来源:300行HTML+CSS+JS代码实现动态圣诞树_html_Albert Edison-北京城市开发者社区

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Christmas Tree and Snow</title>
  <link rel="stylesheet" href="hhttps://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
  <style>
    @import url("https://fonts.googleapis.com/css?family=Great+Vibes|Kaushan+Script");
body {
  margin: 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  color: white;
  width: 100%;
  text-align: center;
  padding: 5px;
  font-family: "Avenir", "Helvetica";
}

  </style>

</head>
<body>
<!-- partial:index.partial.html -->
<canvas id="canvas"></canvas>
<div class="overlay"></div>
<!-- 逆境清醒https://blog.csdn.net/weixin_69553582收集整理,请原作者联系我补充相关的作者信息 -->
  <script>
    // Particle Lib

function Particle(x, y, speed, angle) {
  this.x = x;
  this.y = y;

  this.vx = Math.cos(angle || 0) * (speed || 0);
  this.vy = Math.sin(angle || 0) * (speed || 0);
}

Particle.prototype.updatePosition = function () {
  this.x += this.vx;
  this.y += this.vy;
};

Particle.prototype.draw = function (ctx) {
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
  ctx.fill();
};

// Snowing

var numOfSnowParticles = 100;
var snowParticles = [];
var windFromLeft = false;
var windFromRight = false;

function createSnowParticles() {
  let particle = new Particle(Math.random() * screenWidth, -10, 1, 2 * Math.PI / 2 * Math.random());
  particle.originalX = particle.x;
  particle.originalY = particle.y;
  particle.radius = 1 + Math.random() * 2;
  particle.angle = 0;
  particle.speed = .05;
  particle.isDead = false;
  particle.color = "white";
  snowParticles.push(particle);
}


function drawSnowFrame() {
  for (var i = 0; i < snowParticles.length; i++) {
    let particle = snowParticles[i];

    if (!particle.isDead) {

      particle.updatePosition();

      if (!windFromLeft && !windFromRight) {
        particle.x = particle.originalX + Math.sin(particle.angle) * 10;
      } else if (windFromLeft) {
        particle.x += 2;
        particle.originalX = particle.x;
      } else if (windFromRight) {
        particle.x -= 2;
        particle.originalX = particle.x;
      }

      particle.y += .1;
      particle.angle += particle.speed;

      checkIfParticleTouchesADeadParticle(i);
      checkIfParticleHitsGround(particle);
    }
    particle.draw(context);
  }
}

function checkIfParticleHitsGround(particle) {
  if (particle.y + particle.radius > screenHeight) {
    particle.y = screenHeight - particle.radius;
    particle.isDead = true;
  }
}

function checkIfParticleTouchesADeadParticle(index) {

  for (var i = index + 1; i < snowParticles.length; i++) {

    if (snowParticles[i].isDead) {
      let dx = snowParticles[index].x - snowParticles[i].x;
      let dy = snowParticles[index].y - snowParticles[i].y;

      let distance = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));

      if (distance <= snowParticles[index].radius + snowParticles[i].radius) {
        snowParticles[index].isDead = true;
      }
    }
  }
}

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function handleTouchStart(evt) {
  xDown = evt.touches[0].clientX;
  yDown = evt.touches[0].clientY;
};

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    if (xDiff > 0) {
      windFromRight = true;
      windFromLeft = false;
    } else {
      windFromLeft = true;
      windFromRight = false;
    }
  } else {
    windFromLeft = windFromRight = false;
  }

  xDown = null;
  yDown = null;
};

// Tree

var treeParticles = [];
var treeColors = ['#199642', '#E44822', '#40B8E2', '#F7D231'];

function drawTreeFrame() {
  for (var i = 0; i < treeParticles.length; i++) {
    treeParticles[i].draw(context);
    treeParticles[i].radius = 1 + Math.random() * 3;
  }

  if (treeParticles.length > 0) {
    drawStar(centerX, screenHeight * .2, 5, 20, 10);
  }
}

function getPixelData(imageData, x, y) {
  let basePosition = (screenWidth * y + x) * 4;
  return {
    r: imageData.data[basePosition],
    g: imageData.data[basePosition + 1],
    b: imageData.data[basePosition + 2],
    a: imageData.data[basePosition + 3] };

}

function drawStar(cx, cy, spikes, outerRadius, innerRadius) {
  var rot = Math.PI / 2 * 3;
  var x = cx;
  var y = cy;
  var step = Math.PI / spikes;

  context.beginPath();
  context.moveTo(cx, cy - outerRadius);
  for (i = 0; i < spikes; i++) {
    x = cx + Math.cos(rot) * outerRadius;
    y = cy + Math.sin(rot) * outerRadius;
    context.lineTo(x, y);
    rot += step;

    x = cx + Math.cos(rot) * innerRadius;
    y = cy + Math.sin(rot) * innerRadius;
    context.lineTo(x, y);
    rot += step;
  }
  context.lineTo(cx, cy - outerRadius);
  context.closePath();
  context.lineWidth = 5;
  context.strokeStyle = 'yellow';
  context.stroke();
  context.fillStyle = 'lightyellow';
  context.fill();
}

function initTree(text) {
  context.clearRect(0, 0, screenWidth, screenHeight);

  context.moveTo(centerX, screenHeight * .2);
  context.lineTo(centerX - 100, centerY + 100);
  context.lineTo(centerX + 100, centerY + 100);
  context.fill();

  var imageData = context.getImageData(0, 0, screenWidth, screenHeight);

  context.clearRect(0, 0, screenWidth, screenHeight);

  treeParticles.length = 0;

  for (var i = 0; i < screenWidth; i += 10) {
    for (j = 0; j < screenHeight; j += 10) {

      let pixelData = getPixelData(imageData, i, j);

      if (pixelData.a > 0) {
        let particle = new Particle(i, j);
        particle.color = treeColors[Math.floor(Math.random() * 5)];
        particle.radius = 1 + Math.random() * 3;
        treeParticles.push(particle);
      }
    }
  }
}


//let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');
let screenWidth = canvas.width = window.innerWidth;
let screenHeight = canvas.height = window.innerHeight;

var centerX = screenWidth * .5;
var centerY = screenHeight * .5;

drawFrame();
function drawFrame() {
  context.clearRect(0, 0, screenWidth, screenHeight);

  context.fillStyle = "black";
  context.fillRect(0, 0, screenWidth, screenHeight);

  context.fillStyle = "white";
  context.font = "bold 50px Kaushan Script";
  context.textAlign = "center";
  context.fillText("Merry Christmas", centerX, screenHeight * .8);

  drawTreeFrame();
  drawSnowFrame();
  requestAnimationFrame(drawFrame);
}

initTree('hello world');
setInterval(() => {
  createSnowParticles();
}, 100);

  </script>

</body>
</html>

二、样式:圣诞树和礼物盒(HTML+CSS)

语言:html+css

作者:请原创作者留言,我好更新该代码的原创作者信息

 来源:网络收集

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>christmas-tree</title>
   <style>
    .text {
      color: whitesmoke;
      font-size: 45px;
      text-align: center;
      font-family: 'Fantasy';
      text-shadow: 5px 5px 5px yellow;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #020024;
    }

    .bgg {
      position: fixed;
      display: grid;
      align-content: center;
      z-index: 1;
      height: 100vh;
      left: 50%;
      margin-left: -315px;
    }

    .bgg li.sphere {
      width: 650px;
      height: 650px;
      background: #020024;
      background: radial-gradient(rgba(2, 0, 36, 0.5) 47%, rgba(108, 108, 142, 0.7) 51%, rgba(171, 171, 255, 0.7) 52%, #020024 53%);
    }

    ul {
      list-style-type: none;
    }

    .tree {
      z-index: 2;
      position: fixed;
      left: 50%;
      margin-left: -160px;
      display: grid;
      height: 97vh;
      align-content: center;
      grid-template-areas: ". tree-top ."". tree-middle ."". tree-bottom ."". tree-stem .";
      grid-template-columns: 100px auto 100px;
      transform: rotateY(50deg) scaley(1.5);
    }

    .tree>li {
      position: relative;
      display: block;
    }

    .tree .top,
    .tree .top-star {
      grid-area: tree-top;
    }

    .tree .top li,
    .tree .top-star li {
      border-color: green;
    }

    .tree .top-star {
      grid-area: tree-top;
      width: 130px;
      height: 55px;
      position: absolute;
      background-color: #fff;
      border-radius: 50%;
      top: -48px;
      z-index: 10;
      left: 4px;
      animation: starLight 1.5s ease-out infinite alternate;
    }

    .tree .middle {
      grid-area: tree-middle;
    }

    .tree .bottom {
      grid-area: tree-bottom;
    }

    .tree .stem {
      grid-area: tree-stem;
    }

    .tree .tree-pts {
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }

    .tree .tree-pts .pts {
      top: 0;
      position: absolute;
    }

    .tree li:nth-of-type(1) .pts {
      border-left: 10px solid #049c04;
      z-index: calc(8 - 1);
    }

    .tree li:nth-of-type(2) .pts {
      border-left: 10px solid #13a313;
      z-index: calc(8 - 2);
    }

    .tree li:nth-of-type(3) .pts {
      border-left: 10px solid #067806;
      z-index: calc(8 - 3);
    }

    .tree li:nth-of-type(4) .pts {
      border-left: 10px solid #0f6b0f;
      z-index: calc(8 - 4);
    }

    .tree li:nth-of-type(5) .pts {
      border-left: 10px solid #0f5f0f;
      z-index: calc(8 - 5);
    }

    .tree li:nth-of-type(6) .pts {
      border-left: 10px solid #0f4f0f;
      z-index: calc(8 - 6);
    }

    .tree li:nth-of-type(7) .stem {
      border-bottom-color: #0f4f0f;
      z-index: calc(8 - 7);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(1) {
      width: 1.7em;
      height: 2em;
      border-radius: 100% 0 0 0;
      transform: rotate(219.5deg) rotatey(28.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(2) {
      width: 1.7em;
      height: 2em;
      border-radius: 100% 0 0 0;
      transform: rotate(218.5deg) rotatey(36.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(3) {
      width: 1.7em;
      height: 2em;
      border-radius: 100% 0 0 0;
      transform: rotate(217.5deg) rotatey(44.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(4) {
      width: 1.7em;
      height: 2em;
      border-radius: 100% 0 0 0;
      transform: rotate(216.5deg) rotatey(52.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(5) {
      width: 1.7em;
      height: 2em;
      border-radius: 100% 0 0 0;
      transform: rotate(215.5deg) rotatey(60.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(6) {
      width: 1.7em;
      height: 2em;
      border-radius: 100% 0 0 0;
      transform: rotate(214.5deg) rotatey(68.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(7) {
      width: 1.7em;
      height: 2em;
      border-radius: 100% 0 0 0;
      transform: rotate(213.5deg) rotatey(76.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(8) {
      width: 1.7em;
      height: 2em;
      border-radius: 100% 0 0 0;
      transform: rotate(212.5deg) rotatey(84.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(9) {
      width: 1.7em;
      height: 2em;
      border-radius: 0 0 0 100%;
      transform: rotate(-40.5deg) rotatey(28.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(10) {
      width: 1.7em;
      height: 2em;
      border-radius: 0 0 0 100%;
      transform: rotate(-41.5deg) rotatey(37deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(11) {
      width: 1.7em;
      height: 2em;
      border-radius: 0 0 0 100%;
      transform: rotate(-42.5deg) rotatey(45.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(12) {
      width: 1.7em;
      height: 2em;
      border-radius: 0 0 0 100%;
      transform: rotate(-43.5deg) rotatey(54deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(13) {
      width: 1.7em;
      height: 2em;
      border-radius: 0 0 0 100%;
      transform: rotate(-44.5deg) rotatey(62.5deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(14) {
      width: 1.7em;
      height: 2em;
      border-radius: 0 0 0 100%;
      transform: rotate(-45.5deg) rotatey(71deg) translateX(4em);
    }

    .tree li:nth-child(1) .tree-pts .pts:nth-of-type(15) {
      width: 1.7em;
      height: 2em;
      border-radius: 0 0 0 100%;
      transform: rotate(-46.5deg) rotatey(79.5deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(1) {
      width: 3.4em;
      height: 4em;
      border-radius: 100% 0 0 0;
      transform: rotate(220deg) rotatey(29deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(2) {
      width: 3.4em;
      height: 4em;
      border-radius: 100% 0 0 0;
      transform: rotate(219deg) rotatey(37deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(3) {
      width: 3.4em;
      height: 4em;
      border-radius: 100% 0 0 0;
      transform: rotate(218deg) rotatey(45deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(4) {
      width: 3.4em;
      height: 4em;
      border-radius: 100% 0 0 0;
      transform: rotate(217deg) rotatey(53deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(5) {
      width: 3.4em;
      height: 4em;
      border-radius: 100% 0 0 0;
      transform: rotate(216deg) rotatey(61deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(6) {
      width: 3.4em;
      height: 4em;
      border-radius: 100% 0 0 0;
      transform: rotate(215deg) rotatey(69deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(7) {
      width: 3.4em;
      height: 4em;
      border-radius: 100% 0 0 0;
      transform: rotate(214deg) rotatey(77deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(8) {
      width: 3.4em;
      height: 4em;
      border-radius: 100% 0 0 0;
      transform: rotate(213deg) rotatey(85deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(9) {
      width: 3.4em;
      height: 4em;
      border-radius: 0 0 0 100%;
      transform: rotate(-40deg) rotatey(29deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(10) {
      width: 3.4em;
      height: 4em;
      border-radius: 0 0 0 100%;
      transform: rotate(-41deg) rotatey(38deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(11) {
      width: 3.4em;
      height: 4em;
      border-radius: 0 0 0 100%;
      transform: rotate(-42deg) rotatey(47deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(12) {
      width: 3.4em;
      height: 4em;
      border-radius: 0 0 0 100%;
      transform: rotate(-43deg) rotatey(56deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(13) {
      width: 3.4em;
      height: 4em;
      border-radius: 0 0 0 100%;
      transform: rotate(-44deg) rotatey(65deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(14) {
      width: 3.4em;
      height: 4em;
      border-radius: 0 0 0 100%;
      transform: rotate(-45deg) rotatey(74deg) translateX(4em);
    }

    .tree li:nth-child(2) .tree-pts .pts:nth-of-type(15) {
      width: 3.4em;
      height: 4em;
      border-radius: 0 0 0 100%;
      transform: rotate(-46deg) rotatey(83deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(1) {
      width: 5.1em;
      height: 6em;
      border-radius: 100% 0 0 0;
      transform: rotate(220.5deg) rotatey(29.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(2) {
      width: 5.1em;
      height: 6em;
      border-radius: 100% 0 0 0;
      transform: rotate(219.5deg) rotatey(37.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(3) {
      width: 5.1em;
      height: 6em;
      border-radius: 100% 0 0 0;
      transform: rotate(218.5deg) rotatey(45.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(4) {
      width: 5.1em;
      height: 6em;
      border-radius: 100% 0 0 0;
      transform: rotate(217.5deg) rotatey(53.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(5) {
      width: 5.1em;
      height: 6em;
      border-radius: 100% 0 0 0;
      transform: rotate(216.5deg) rotatey(61.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(6) {
      width: 5.1em;
      height: 6em;
      border-radius: 100% 0 0 0;
      transform: rotate(215.5deg) rotatey(69.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(7) {
      width: 5.1em;
      height: 6em;
      border-radius: 100% 0 0 0;
      transform: rotate(214.5deg) rotatey(77.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(8) {
      width: 5.1em;
      height: 6em;
      border-radius: 100% 0 0 0;
      transform: rotate(213.5deg) rotatey(85.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(9) {
      width: 5.1em;
      height: 6em;
      border-radius: 0 0 0 100%;
      transform: rotate(-39.5deg) rotatey(29.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(10) {
      width: 5.1em;
      height: 6em;
      border-radius: 0 0 0 100%;
      transform: rotate(-40.5deg) rotatey(39deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(11) {
      width: 5.1em;
      height: 6em;
      border-radius: 0 0 0 100%;
      transform: rotate(-41.5deg) rotatey(48.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(12) {
      width: 5.1em;
      height: 6em;
      border-radius: 0 0 0 100%;
      transform: rotate(-42.5deg) rotatey(58deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(13) {
      width: 5.1em;
      height: 6em;
      border-radius: 0 0 0 100%;
      transform: rotate(-43.5deg) rotatey(67.5deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(14) {
      width: 5.1em;
      height: 6em;
      border-radius: 0 0 0 100%;
      transform: rotate(-44.5deg) rotatey(77deg) translateX(4em);
    }

    .tree li:nth-child(3) .tree-pts .pts:nth-of-type(15) {
      width: 5.1em;
      height: 6em;
      border-radius: 0 0 0 100%;
      transform: rotate(-45.5deg) rotatey(86.5deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(1) {
      width: 6.8em;
      height: 8em;
      border-radius: 100% 0 0 0;
      transform: rotate(221deg) rotatey(30deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(2) {
      width: 6.8em;
      height: 8em;
      border-radius: 100% 0 0 0;
      transform: rotate(220deg) rotatey(38deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(3) {
      width: 6.8em;
      height: 8em;
      border-radius: 100% 0 0 0;
      transform: rotate(219deg) rotatey(46deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(4) {
      width: 6.8em;
      height: 8em;
      border-radius: 100% 0 0 0;
      transform: rotate(218deg) rotatey(54deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(5) {
      width: 6.8em;
      height: 8em;
      border-radius: 100% 0 0 0;
      transform: rotate(217deg) rotatey(62deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(6) {
      width: 6.8em;
      height: 8em;
      border-radius: 100% 0 0 0;
      transform: rotate(216deg) rotatey(70deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(7) {
      width: 6.8em;
      height: 8em;
      border-radius: 100% 0 0 0;
      transform: rotate(215deg) rotatey(78deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(8) {
      width: 6.8em;
      height: 8em;
      border-radius: 100% 0 0 0;
      transform: rotate(214deg) rotatey(86deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(9) {
      width: 6.8em;
      height: 8em;
      border-radius: 0 0 0 100%;
      transform: rotate(-39deg) rotatey(30deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(10) {
      width: 6.8em;
      height: 8em;
      border-radius: 0 0 0 100%;
      transform: rotate(-40deg) rotatey(40deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(11) {
      width: 6.8em;
      height: 8em;
      border-radius: 0 0 0 100%;
      transform: rotate(-41deg) rotatey(50deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(12) {
      width: 6.8em;
      height: 8em;
      border-radius: 0 0 0 100%;
      transform: rotate(-42deg) rotatey(60deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(13) {
      width: 6.8em;
      height: 8em;
      border-radius: 0 0 0 100%;
      transform: rotate(-43deg) rotatey(70deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(14) {
      width: 6.8em;
      height: 8em;
      border-radius: 0 0 0 100%;
      transform: rotate(-44deg) rotatey(80deg) translateX(4em);
    }

    .tree li:nth-child(4) .tree-pts .pts:nth-of-type(15) {
      width: 6.8em;
      height: 8em;
      border-radius: 0 0 0 100%;
      transform: rotate(-45deg) rotatey(90deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(1) {
      width: 8.5em;
      height: 10em;
      border-radius: 100% 0 0 0;
      transform: rotate(221.5deg) rotatey(30.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(2) {
      width: 8.5em;
      height: 10em;
      border-radius: 100% 0 0 0;
      transform: rotate(220.5deg) rotatey(38.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(3) {
      width: 8.5em;
      height: 10em;
      border-radius: 100% 0 0 0;
      transform: rotate(219.5deg) rotatey(46.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(4) {
      width: 8.5em;
      height: 10em;
      border-radius: 100% 0 0 0;
      transform: rotate(218.5deg) rotatey(54.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(5) {
      width: 8.5em;
      height: 10em;
      border-radius: 100% 0 0 0;
      transform: rotate(217.5deg) rotatey(62.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(6) {
      width: 8.5em;
      height: 10em;
      border-radius: 100% 0 0 0;
      transform: rotate(216.5deg) rotatey(70.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(7) {
      width: 8.5em;
      height: 10em;
      border-radius: 100% 0 0 0;
      transform: rotate(215.5deg) rotatey(78.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(8) {
      width: 8.5em;
      height: 10em;
      border-radius: 100% 0 0 0;
      transform: rotate(214.5deg) rotatey(86.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(9) {
      width: 8.5em;
      height: 10em;
      border-radius: 0 0 0 100%;
      transform: rotate(-38.5deg) rotatey(30.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(10) {
      width: 8.5em;
      height: 10em;
      border-radius: 0 0 0 100%;
      transform: rotate(-39.5deg) rotatey(41deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(11) {
      width: 8.5em;
      height: 10em;
      border-radius: 0 0 0 100%;
      transform: rotate(-40.5deg) rotatey(51.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(12) {
      width: 8.5em;
      height: 10em;
      border-radius: 0 0 0 100%;
      transform: rotate(-41.5deg) rotatey(62deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(13) {
      width: 8.5em;
      height: 10em;
      border-radius: 0 0 0 100%;
      transform: rotate(-42.5deg) rotatey(72.5deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(14) {
      width: 8.5em;
      height: 10em;
      border-radius: 0 0 0 100%;
      transform: rotate(-43.5deg) rotatey(83deg) translateX(4em);
    }

    .tree li:nth-child(5) .tree-pts .pts:nth-of-type(15) {
      width: 8.5em;
      height: 10em;
      border-radius: 0 0 0 100%;
      transform: rotate(-44.5deg) rotatey(93.5deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(1) {
      width: 10.2em;
      height: 12em;
      border-radius: 100% 0 0 0;
      transform: rotate(222deg) rotatey(31deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(2) {
      width: 10.2em;
      height: 12em;
      border-radius: 100% 0 0 0;
      transform: rotate(221deg) rotatey(39deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(3) {
      width: 10.2em;
      height: 12em;
      border-radius: 100% 0 0 0;
      transform: rotate(220deg) rotatey(47deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(4) {
      width: 10.2em;
      height: 12em;
      border-radius: 100% 0 0 0;
      transform: rotate(219deg) rotatey(55deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(5) {
      width: 10.2em;
      height: 12em;
      border-radius: 100% 0 0 0;
      transform: rotate(218deg) rotatey(63deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(6) {
      width: 10.2em;
      height: 12em;
      border-radius: 100% 0 0 0;
      transform: rotate(217deg) rotatey(71deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(7) {
      width: 10.2em;
      height: 12em;
      border-radius: 100% 0 0 0;
      transform: rotate(216deg) rotatey(79deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(8) {
      width: 10.2em;
      height: 12em;
      border-radius: 100% 0 0 0;
      transform: rotate(215deg) rotatey(87deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(9) {
      width: 10.2em;
      height: 12em;
      border-radius: 0 0 0 100%;
      transform: rotate(-38deg) rotatey(31deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(10) {
      width: 10.2em;
      height: 12em;
      border-radius: 0 0 0 100%;
      transform: rotate(-39deg) rotatey(42deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(11) {
      width: 10.2em;
      height: 12em;
      border-radius: 0 0 0 100%;
      transform: rotate(-40deg) rotatey(53deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(12) {
      width: 10.2em;
      height: 12em;
      border-radius: 0 0 0 100%;
      transform: rotate(-41deg) rotatey(64deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(13) {
      width: 10.2em;
      height: 12em;
      border-radius: 0 0 0 100%;
      transform: rotate(-42deg) rotatey(75deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(14) {
      width: 10.2em;
      height: 12em;
      border-radius: 0 0 0 100%;
      transform: rotate(-43deg) rotatey(86deg) translateX(4em);
    }

    .tree li:nth-child(6) .tree-pts .pts:nth-of-type(15) {
      width: 10.2em;
      height: 12em;
      border-radius: 0 0 0 100%;
      transform: rotate(-44deg) rotatey(97deg) translateX(4em);
    }

    .left {
      right: 50%;
      margin-right: -38px;
    }

    .right {
      left: 50%;
      margin-left: -38px;
    }

    .tree-stem .stem {
      width: 0;
      height: 0;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-bottom: 120px solid #0f4f0f;
      margin: 0 auto;
    }

    .gift {
      position: absolute;
      width: 50px;
      height: 30px;
      margin: 5px;
      background-color: #ffc0cb;
      border: 1px dotted #42161e;
      z-index: 20;
      box-shadow: 1px -1px 2px #f5b0bc, 2px -2px 2px #e89daa, 3px -3px 2px #da8a98, 4px -4px 2px #ce7a89, 5px -5px 2px #bb6676, 6px -6px 2px #af5969, 7px -7px 2px #a04a5a, 8px -8px 2px #943e4e, 9px -9px 2px #803442, 10px -10px 2px #6b2834, 11px -11px 2px #541e28, 12px -12px 2px #42161e;
    }

    .g1 {
      left: -10px;
      top: 110px;
    }

    .g2 {
      left: 33px;
      top: 120px;
      height: 15px;
    }

    .g3 {
      left: 85px;
      top: 125px;
      width: 70px;
      height: 22px;
    }

    .g4 {
      left: -45px;
      top: 130px;
    }

    .g5 {
      left: 45px;
      top: 130px;
    }

    .g6 {
      left: 0px;
      top: 130px;
    }

    .g7 {
      left: 65px;
      top: 130px;
    }

    .g8 {
      left: 120px;
      top: 150px;
      height: 13px;
      width: 123px;
    }

    .g9 {
      left: 50px;
      top: 150px;
    }

    .shadow {
      width: 400px;
      height: 50px;
      background-color: rgba(42, 41, 68, 0.5);
      position: absolute;
      border-radius: 50%;
      top: 126px;
      left: -128px;
    }

    .toys {
      display: grid;
      position: absolute;
      gap: 5px;
      grid-template-columns: repeat(9, 20px);
      grid-template-rows: repeat(12, 20px);
      left: calc(50% - 100px);
      top: calc(50% - 135px);
      z-index: 2;
    }

    .toys .star {
      top: -30px;
      left: 10px;
      position: relative;
      border-right: 100px solid transparent;
      border-bottom: 70px solid gold;
      border-left: 100px solid transparent;
      transform: rotate(35deg) scale(0.2);
    }

    .toys .star:before {
      border-bottom: 80px solid gold;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      top: -45px;
      left: -65px;
      content: '';
      transform: rotate(-35deg);
    }

    .toys .star:after {
      position: absolute;
      top: 3px;
      left: -105px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid gold;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

    .toys .ball {
      width: 20px;
      height: 20px;
      background-color: #f00;
      border-radius: 50%;
      z-index: 1;
      position: absolute;
    }

    .toys .b1,
    .toys .b4,
    .toys .b5,
    .toys .b8,
    .toys .b11,
    .toys .b13,
    .toys .b16,
    .toys .b18 {
      background-color: red;
      box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
    }

    .toys .b2,
    .toys .b6,
    .toys .b9,
    .toys .b12,
    .toys .b14,
    .toys .b17,
    .toys .b20 {
      background-color: gold;
      box-shadow: -1px -1px 6px inset #3a3101, 1px 1px 8px inset #ffffff;
    }

    .toys .b3,
    .toys .b7,
    .toys .b10,
    .toys .b15,
    .toys .b19 {
      background-color: #ececec;
      box-shadow: -1px -1px 6px inset #615f5f, 1px 1px 8px inset #ffffff;
    }

    .toys .b1 {
      grid-area: 3 / 5;
      top: -5px;
      left: 10px;
    }

    .toys .b2 {
      grid-area: 4 / 4;
      top: -5px;
      left: -5px;
    }

    .toys .b3 {
      grid-area: 4 / 6;
      top: -1px;
      left: 5px;
    }

    .toys .b4 {
      grid-area: 5 / 5;
      top: -8px;
      left: -3px;
    }

    .toys .b5 {
      grid-area: 6 / 2;
    }

    .toys .b6 {
      grid-area: 6 / 4;
      top: -10px;
      left: -10px;
    }

    .toys .b7 {
      grid-area: 6 / 6;
      top: -10px;
      left: -5px;
    }

    .toys .b8 {
      grid-area: 6 / 8;
      top: 2px;
      left: 5px;
    }

    .toys .b9 {
      grid-area: 7 / 1;
      top: 4px;
      left: 0px;
    }

    .toys .b10 {
      grid-area: 7 / 3;
      top: 3px;
      left: 3px;
    }

    .toys .b11 {
      grid-area: 7 / 5;
      top: -10px;
      left: -10px;
    }

    .toys .b12 {
      grid-area: 7 / 7;
      top: -4px;
      left: 3px;
    }

    .toys .b13 {
      grid-area: 8 / 2;
      top: 8px;
      left: 0px;
    }

    .toys .b14 {
      grid-area: 8 / 4;
      top: 5px;
      left: 5px;
    }

    .toys .b15 {
      grid-area: 8 / 6;
      top: -10px;
      left: -10px;
    }

    .toys .b16 {
      grid-area: 8 / 8;
      top: -3px;
      left: 17px;
    }

    .toys .b17 {
      grid-area: 9 / 1;
      top: 20px;
      left: 8px;
    }

    .toys .b18 {
      grid-area: 9 / 6;
      top: -5px;
      left: 20px;
    }

    .toys .b19 {
      grid-area: 9 / 10;
      top: 26px;
      left: -30px;
    }

    .toys .b20 {
      grid-area: 8 / 10;
      top: 24px;
      left: 0px;
    }

    .light {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      position: absolute;
      background-color: #fff;
      animation: lights 1.5s ease-in infinite alternate;
    }

    .l1 {
      grid-area: 2 / 5;
      top: 5px;
      left: 5px;
    }

    .l2 {
      grid-area: 3 / 4;
      animation-delay: 0.4s;
    }

    .l3 {
      grid-area: 3/ 5;
      top: -5px;
      left: -5px;
      animation-delay: 0.6s;
    }

    .l4 {
      grid-area: 3 / 5;
      top: 15px;
      left: 0px;
      animation-delay: 0.8s;
    }

    .l5 {
      grid-area: 2 / 5;
      top: 5px;
      left: 5px;
      animation-delay: 1s;
    }

    .l7 {
      grid-area: 4 / 5;
      top: 5px;
      left: 15px;
    }

    .l8 {
      animation-delay: 0.4s;
      grid-area: 5 / 7;
      top: -10px;
      left: 10px;
    }

    .l9 {
      animation-delay: 0.6s;
      grid-area: 5 / 6;
    }

    .l10 {
      animation-delay: 0.8s;
      grid-area: 5 / 3;
      top: -5px;
      left: 15px;
    }

    .l11 {
      animation-delay: 1s;
      grid-area: 5 / 4;
      top: 5px;
      left: 10px;
    }

    .l12 {
      grid-area: 6 / 5;
      left: 5px;
    }

    .l13 {
      animation-delay: 0.4s;
      grid-area: 6 / 7;
      left: 5px;
      top: 3px;
    }

    .l14 {
      animation-delay: 0.6s;
      grid-area: 7 / 6;
      left: 5px;
    }

    .l15 {
      animation-delay: 0.8s;
      grid-area: 6 / 3;
      top: 8px;
    }

    .l16 {
      animation-delay: 1s;
      grid-area: 7 / 4;
    }

    .l17 {
      grid-area: 8 / 5;
    }

    .l18 {
      animation-delay: 0.4s;
      grid-area: 9 / 6;
    }

    .l19 {
      animation-delay: 0.6s;
      grid-area: 8 / 7;
      top: 5px;
      left: 7px;
    }

    .l20 {
      animation-delay: 0.8s;
      grid-area: 8 / 2;
      top: -15px;
      left: 5px;
    }

    .l21 {
      animation-delay: 1s;
      grid-area: 8/ 3;
      left: 5px;
      top: 5px;
    }

    .l22 {
      animation-delay: 0.4s;
      grid-area: 7 / 8;
      top: 15px;
      left: 20px;
    }

    .l23 {
      animation-delay: 0.6s;
      grid-area: 9 / 1;
      left: 15px;
      top: 15px;
    }

    .l24 {
      animation-delay: 0.8s;
      grid-area: 9 / 3;
    }

    .l25 {
      animation-delay: 1s;
      grid-area: 9 / 8;
      top: 5px;
      left: 15px;
    }

    .l6 {
      grid-area: 2 / 5;
      top: 10px;
      left: 20px;
    }

    @keyframes starLight {
      0% {
        background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 42%, rgba(255, 242, 173, 0.2) 58%, rgba(255, 255, 255, 0.1) 100%);
      }

      15% {
        background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 41%, rgba(255, 242, 173, 0.2) 59%, rgba(255, 255, 255, 0.1) 100%);
      }

      25% {
        background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 40%, rgba(255, 242, 173, 0.2) 60%, rgba(255, 255, 255, 0.1) 100%);
      }

      35% {
        background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 39%, rgba(255, 242, 173, 0.2) 61%, rgba(255, 255, 255, 0.1) 100%);
      }

      50% {
        background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 38%, rgba(255, 242, 173, 0.2) 62%, rgba(255, 255, 255, 0.1) 100%);
      }

      65% {
        background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 37%, rgba(255, 242, 173, 0.2) 63%, rgba(255, 255, 255, 0.1) 100%);
      }

      75% {
        background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 36%, rgba(255, 242, 173, 0.2) 64%, rgba(255, 255, 255, 0.1) 100%);
      }

      85% {
        background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 35%, rgba(255, 242, 173, 0.2) 65%, rgba(255, 255, 255, 0.1) 100%);
      }

      100% {
        background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 34%, rgba(255, 242, 173, 0.2) 66%, rgba(255, 255, 255, 0.1) 100%);
      }
    }

    @keyframes lights {
      0% {
        box-shadow: 0 0 0px 0px #fff;
      }

      25% {
        box-shadow: 0 0 1px 1px #fff;
      }

      50% {
        box-shadow: 0 0 2px 2px #fff;
      }

      75% {
        box-shadow: 0 0 3px 3px #fff;
      }

      100% {
        box-shadow: 0 0 4px 4px #fff;
      }
    }
  </style>
</head>

<body>
<!-- 逆境清醒https://blog.csdn.net/weixin_69553582收集整理,请原作者联系我补充相关的作者信息 -->
    <ul class="bgg">
      <li class="sphere"></li>
      <p class="text">Merry Christmas, everyone~圣诞快乐</p>
    </ul>
    <ul class="tree">
      <li class="top-star"> </li>
      <li class="top">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="middle first">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="middle second">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="middle third">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="bottom outer">
        <ul class="tree-pts">
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts left"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
          <li class="pts right"></li>
        </ul>
      </li>
      <li class="stem">
        <ul class="tree-stem">
          <li class="stem"></li>
          <li class="gift g1"></li>
          <li class="gift g2"></li>
          <li class="gift g3"></li>
          <li class="gift g4"></li>
          <li class="gift g5"></li>
          <li class="gift g6"></li>
          <li class="gift g7"></li>
          <li class="gift g8"></li>
          <li class="gift g9"></li>
          <li class="shadow"></li>
        </ul>
      </li>
    </ul>
    <ul class="toys">
      <li class="star"></li>
      <li class="ball b1"></li>
      <li class="ball b2"></li>
      <li class="ball b3"></li>
      <li class="ball b4"></li>
      <li class="ball b5"></li>
      <li class="ball b6"></li>
      <li class="ball b7"></li>
      <li class="ball b8"></li>
      <li class="ball b9"></li>
      <li class="ball b10"></li>
      <li class="ball b11"></li>
      <li class="ball b12"></li>
      <li class="ball b13"></li>
      <li class="ball b14"></li>
      <li class="ball b15"></li>
      <li class="ball b16"></li>
      <li class="ball b17"></li>
      <li class="ball b18"></li>
      <li class="ball b19"></li>
      <li class="ball b20"></li>
      <li class="light l1"></li>
      <li class="light l2"></li>
      <li class="light l3"></li>
      <li class="light l4"></li>
      <li class="light l5"></li>
      <li class="light l6"></li>
      <li class="light l7"></li>
      <li class="light l8"></li>
      <li class="light l9"></li>
      <li class="light l10"></li>
      <li class="light l11"></li>
      <li class="light l12"></li>
      <li class="light l13"></li>
      <li class="light l14"></li>
      <li class="light l15"></li>
      <li class="light l16"></li>
      <li class="light l17"></li>
      <li class="light l18"></li>
      <li class="light l19"></li>
      <li class="light l20"></li>
      <li class="light l21"></li>
      <li class="light l22"></li>
      <li class="light l23"></li>
      <li class="light l24"></li>
      <li class="light l25"></li>
    </ul>
</body>

</html>

三、样式:飘落雪花+闪烁圣诞树+音乐

语言:html+css

作者:请原创作者留言,我好更新该代码的原创作者信息

 来源:网络收集

<!DOCTYPE HEML PUBLIC>
<html xmlns="http://www.w3.org/1999/html">
    <head>
    <meta charset="utf-8">
        <style>
            * {
                box-sizing: border-box;
            }

            body {
                margin: 0;
                height: 100vh;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #161616;
                color: #c5a880;
                font-family: sans-serif;
            }

            label {
                display: inline-block;
                background-color: #161616;
                padding: 16px;
                border-radius: 0.3rem;
                cursor: pointer;
                margin-top: 1rem;
                width: 300px;
                border-radius: 10px;
                border: 1px solid #c5a880;
                text-align: center;
            }

            ul {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

            .btn {
                background-color: #161616;
                border-radius: 10px;
                color: #c5a880;
                border: 1px solid #c5a880;
                padding: 16px;
                width: 300px;
                margin-bottom: 16px;
                line-height: 1.5;
                cursor: pointer;
            }
            .separator {
                font-weight: bold;
                text-align: center;
                width: 300px;
                margin: 16px 0px;
                color: #a07676;
            }

            .title {
                color: #a07676;
                font-weight: bold;
                font-size: 1.25rem;
                margin-bottom: 16px;
            }

            .text-loading {
                font-size: 2rem;
            }

        </style>
    </head>
<body>

<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
<!-- 逆境清醒https://blog.csdn.net/weixin_69553582收集整理,请原作者联系我补充相关的作者信息 -->
<div id="overlay">
    <ul>
        <li class="title">Select Music</li>
        <li>
            <button class="btn" id="btnA" type="button">
                Snowflakes Falling Down by Simon Panrucker
            </button>
        </li>
        <li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li>
        <li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li>
        <li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li>
        <li class="separator">OR</li>
        <li>
            <input type="file" id="upload" hidden />
            <label for="upload">Upload File</label>
        </li>
    </ul>
</div>

</body>
    <script>
        const { PI, sin, cos } = Math;
        const TAU = 2 * PI;

        const map = (value, sMin, sMax, dMin, dMax) => {
            return dMin + ((value - sMin) / (sMax - sMin)) * (dMax - dMin);
        };

        const range = (n, m = 0) =>
            Array(n)
                .fill(m)
                .map((i, j) => i + j);

        const rand = (max, min = 0) => min + Math.random() * (max - min);
        const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min));
        const randChoise = (arr) => arr[randInt(arr.length)];
        const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)];

        let scene, camera, renderer, analyser;
        let step = 0;
        const uniforms = {
            time: { type: "f", value: 0.0 },
            step: { type: "f", value: 0.0 },
        };
        const params = {
            exposure: 1,
            bloomStrength: 0.9,
            bloomThreshold: 0,
            bloomRadius: 0.5,
        };
        let composer;

        const fftSize = 2048;
        const totalPoints = 4000;

        const listener = new THREE.AudioListener();

        const audio = new THREE.Audio(listener);

        document.querySelector("input").addEventListener("change", uploadAudio, false);

        const buttons = document.querySelectorAll(".btn");
        buttons.forEach((button, index) =>
            button.addEventListener("click", () => loadAudio(index))
        );

        function init() {
            const overlay = document.getElementById("overlay");
            overlay.remove();

            scene = new THREE.Scene();
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            camera = new THREE.PerspectiveCamera(
                60,
                window.innerWidth / window.innerHeight,
                1,
                1000
            );
            camera.position.set(-0.09397456774197047,-2.5597086635726947,24.420789670889008)
            camera.rotation.set(0.10443543723052419,-0.003827152981119352,0.0004011488708739715)

            const format = renderer.capabilities.isWebGL2
                ? THREE.RedFormat
                : THREE.LuminanceFormat;

            uniforms.tAudioData = {
                value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format),
            };

            addPlane(scene, uniforms, 3000);
            addSnow(scene, uniforms);

            range(10).map((i) => {
                addTree(scene, uniforms, totalPoints, [20, 0, -20 * i]);
                addTree(scene, uniforms, totalPoints, [-20, 0, -20 * i]);
            });

            const renderScene = new THREE.RenderPass(scene, camera);

            const bloomPass = new THREE.UnrealBloomPass(
                new THREE.Vector2(window.innerWidth, window.innerHeight),
                1.5,
                0.4,
                0.85
            );
            bloomPass.threshold = params.bloomThreshold;
            bloomPass.strength = params.bloomStrength;
            bloomPass.radius = params.bloomRadius;

            composer = new THREE.EffectComposer(renderer);
            composer.addPass(renderScene);
            composer.addPass(bloomPass);

            addListners(camera, renderer, composer);
            animate();
        }

        function animate(time) {
            analyser.getFrequencyData();
            uniforms.tAudioData.value.needsUpdate = true;
            step = (step + 1) % 1000;
            uniforms.time.value = time;
            uniforms.step.value = step;
            composer.render();
            requestAnimationFrame(animate);
        }

        function loadAudio(i) {
            document.getElementById("overlay").innerHTML =
                '<div class="text-loading">Please Wait...</div>';
            const files = [
                "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3",
                "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3",
                "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",
                "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3",
            ];
            const file = files[i];

            const loader = new THREE.AudioLoader();
            loader.load(file, function (buffer) {
                audio.setBuffer(buffer);
                audio.play();
                analyser = new THREE.AudioAnalyser(audio, fftSize);
                init();
            });




        }


        function uploadAudio(event) {
            document.getElementById("overlay").innerHTML =
                '<div class="text-loading">Please Wait...</div>';
            const files = event.target.files;
            const reader = new FileReader();

            reader.onload = function (file) {
                var arrayBuffer = file.target.result;

                listener.context.decodeAudioData(arrayBuffer, function (audioBuffer) {
                    audio.setBuffer(audioBuffer);
                    audio.play();
                    analyser = new THREE.AudioAnalyser(audio, fftSize);
                    init();
                });
            };

            reader.readAsArrayBuffer(files[0]);
        }

        function addTree(scene, uniforms, totalPoints, treePosition) {
            const vertexShader = `
  attribute float mIndex;
  varying vec3 vColor;
  varying float opacity;
  uniform sampler2D tAudioData;

  float norm(float value, float min, float max ){
      return (value - min) / (max - min);
  }
  float lerp(float norm, float min, float max){
  return (max - min) * norm + min;
  }

  float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){
  return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
  }


  void main() {
      vColor = color;
      vec3 p = position;
      vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
      float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r;
      float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 );
      float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0);
      opacity = map(mvPosition.z , -200.0, 15.0, 0.0, 1.0);
      gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z );
      gl_Position = projectionMatrix * mvPosition;
  }
`;
            const fragmentShader = `
  varying vec3 vColor;
  varying float opacity;
  uniform sampler2D pointTexture;
  void main() {
      gl_FragColor = vec4( vColor, opacity );
      gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
  }
  `;
            const shaderMaterial = new THREE.ShaderMaterial({
                uniforms: {
                    ...uniforms,
                    pointTexture: {
                        value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`),
                    },
                },
                vertexShader,
                fragmentShader,
                blending: THREE.AdditiveBlending,
                depthTest: false,
                transparent: true,
                vertexColors: true,
            });

            const geometry = new THREE.BufferGeometry();
            const positions = [];
            const colors = [];
            const sizes = [];
            const phases = [];
            const mIndexs = [];

            const color = new THREE.Color();

            for (let i = 0; i < totalPoints; i++) {
                const t = Math.random();
                const y = map(t, 0, 1, -8, 10);
                const ang = map(t, 0, 1, 0, 6 * TAU) + (TAU / 2) * (i % 2);
                const [z, x] = polar(ang, map(t, 0, 1, 5, 0));

                const modifier = map(t, 0, 1, 1, 0);
                positions.push(x + rand(-0.3 * modifier, 0.3 * modifier));
                positions.push(y + rand(-0.3 * modifier, 0.3 * modifier));
                positions.push(z + rand(-0.3 * modifier, 0.3 * modifier));

                color.setHSL(map(i, 0, totalPoints, 1.0, 0.0), 1.0, 0.5);

                colors.push(color.r, color.g, color.b);
                phases.push(rand(1000));
                sizes.push(1);
                const mIndex = map(i, 0, totalPoints, 1.0, 0.0);
                mIndexs.push(mIndex);
            }

            geometry.setAttribute(
                "position",
                new THREE.Float32BufferAttribute(positions, 3).setUsage(
                    THREE.DynamicDrawUsage
                )
            );
            geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
            geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
            geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
            geometry.setAttribute("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1));

            const tree = new THREE.Points(geometry, shaderMaterial);

            const [px, py, pz] = treePosition;

            tree.position.x = px;
            tree.position.y = py;
            tree.position.z = pz;

            scene.add(tree);
        }

        function addSnow(scene, uniforms) {
            const vertexShader = `
  attribute float size;
  attribute float phase;
  attribute float phaseSecondary;

  varying vec3 vColor;
  varying float opacity;


  uniform float time;
  uniform float step;

  float norm(float value, float min, float max ){
      return (value - min) / (max - min);
  }
  float lerp(float norm, float min, float max){
      return (max - min) * norm + min;
  }

  float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){
      return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
  }
  void main() {
      float t = time* 0.0006;

      vColor = color;

      vec3 p = position;

      p.y = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0);

      p.x += sin(t+phase);
      p.z += sin(t+phaseSecondary);

      opacity = map(p.z, -150.0, 15.0, 0.0, 1.0);

      vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );

      gl_PointSize = size * ( 100.0 / -mvPosition.z );

      gl_Position = projectionMatrix * mvPosition;

  }
  `;

            const fragmentShader = `
  uniform sampler2D pointTexture;
  varying vec3 vColor;
  varying float opacity;

  void main() {
      gl_FragColor = vec4( vColor, opacity );
      gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
  }
  `;
            function createSnowSet(sprite) {
                const totalPoints = 300;
                const shaderMaterial = new THREE.ShaderMaterial({
                    uniforms: {
                        ...uniforms,
                        pointTexture: {
                            value: new THREE.TextureLoader().load(sprite),
                        },
                    },
                    vertexShader,
                    fragmentShader,
                    blending: THREE.AdditiveBlending,
                    depthTest: false,
                    transparent: true,
                    vertexColors: true,
                });

                const geometry = new THREE.BufferGeometry();
                const positions = [];
                const colors = [];
                const sizes = [];
                const phases = [];
                const phaseSecondaries = [];

                const color = new THREE.Color();

                for (let i = 0; i < totalPoints; i++) {
                    const [x, y, z] = [rand(25, -25), 0, rand(15, -150)];
                    positions.push(x);
                    positions.push(y);
                    positions.push(z);

                    color.set(randChoise(["#f1d4d4", "#f1f6f9", "#eeeeee", "#f1f1e8"]));

                    colors.push(color.r, color.g, color.b);
                    phases.push(rand(1000));
                    phaseSecondaries.push(rand(1000));
                    sizes.push(rand(4, 2));
                }

                geometry.setAttribute(
                    "position",
                    new THREE.Float32BufferAttribute(positions, 3)
                );
                geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
                geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
                geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
                geometry.setAttribute(
                    "phaseSecondary",
                    new THREE.Float32BufferAttribute(phaseSecondaries, 1)
                );

                const mesh = new THREE.Points(geometry, shaderMaterial);

                scene.add(mesh);
            }
            const sprites = [
                "https://assets.codepen.io/3685267/snowflake1.png",
                "https://assets.codepen.io/3685267/snowflake2.png",
                "https://assets.codepen.io/3685267/snowflake3.png",
                "https://assets.codepen.io/3685267/snowflake4.png",
                "https://assets.codepen.io/3685267/snowflake5.png",
            ];
            sprites.forEach((sprite) => {
                createSnowSet(sprite);
            });
        }

        function addPlane(scene, uniforms, totalPoints) {
            const vertexShader = `
  attribute float size;
  attribute vec3 customColor;
  varying vec3 vColor;

  void main() {
      vColor = customColor;
      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
      gl_PointSize = size * ( 300.0 / -mvPosition.z );
      gl_Position = projectionMatrix * mvPosition;

  }
  `;
            const fragmentShader = `
  uniform vec3 color;
  uniform sampler2D pointTexture;
  varying vec3 vColor;

  void main() {
      gl_FragColor = vec4( vColor, 1.0 );
      gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );

  }
  `;
            const shaderMaterial = new THREE.ShaderMaterial({
                uniforms: {
                    ...uniforms,
                    pointTexture: {
                        value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`),
                    },
                },
                vertexShader,
                fragmentShader,
                blending: THREE.AdditiveBlending,
                depthTest: false,
                transparent: true,
                vertexColors: true,
            });

            const geometry = new THREE.BufferGeometry();
            const positions = [];
            const colors = [];
            const sizes = [];

            const color = new THREE.Color();

            for (let i = 0; i < totalPoints; i++) {
                const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)];
                positions.push(x);
                positions.push(y);
                positions.push(z);

                color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"]));

                colors.push(color.r, color.g, color.b);
                sizes.push(1);
            }

            geometry.setAttribute(
                "position",
                new THREE.Float32BufferAttribute(positions, 3).setUsage(
                    THREE.DynamicDrawUsage
                )
            );
            geometry.setAttribute(
                "customColor",
                new THREE.Float32BufferAttribute(colors, 3)
            );
            geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));

            const plane = new THREE.Points(geometry, shaderMaterial);

            plane.position.y = -8;
            scene.add(plane);
        }

        function addListners(camera, renderer, composer) {
            document.addEventListener("keydown", (e) => {
                const { x, y, z } = camera.position;
                console.log(`camera.position.set(${x},${y},${z})`);
                const { x: a, y: b, z: c } = camera.rotation;
                console.log(`camera.rotation.set(${a},${b},${c})`);
            });

            window.addEventListener(
                "resize",
                () => {
                    const width = window.innerWidth;
                    const height = window.innerHeight;

                    camera.aspect = width / height;
                    camera.updateProjectionMatrix();

                    renderer.setSize(width, height);
                    composer.setSize(width, height);
                },
                false
            );
        }


    </script>
</html>

四、样式:动态线条圣诞树

语言:html+css+svg

作者:请原创作者留言,我好更新该代码的原创作者信息

 来源:网络收集

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>christmasTree</title>
  <link rel="stylesheet" href="">
<style>
  body {
    background-color: #151522;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

body,
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

svg {
    width: 90%;
    height: 90%;
    visibility: hidden;
}

.sparkle {}

.font {
  color: #ec0d0d;
  font-size: 20px;
  position: absolute;
  bottom: 10px;
  font-weight: 600;
  font-size: 28px;
  font-family: "黑体";
  color: #8c888b;
  background: -webkit-linear-gradient(45deg, #58eff6, #f17840, #eac821, #4913ea, #bed5f5);
  color: transparent;
  -webkit-background-clip: text;
  animation: ran 5s linear infinite;
}

  @keyframes ran {
    from {
      backgroud-position: 0 0;
    }
    to {
      background-position: 2000px 0;
    }
  }
</style>
</head>
<body>

<div class="font">
  圣诞快乐!
</div>
<svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 800 600" >
         <defs>
            <circle id="circ" class="particle" cx="0" cy="0" r="1"/>
            <polygon id="star" class="particle" points="4.55,0 5.95,2.85 9.1,3.3 6.82,5.52 7.36,8.65 4.55,7.17 1.74,8.65 2.27,5.52 0,3.3 3.14,2.85 "/>
            <polygon id="cross" class="particle"  points="4,3.5 2.5,2 4,0.5 3.5,0 2,1.5 0.5,0 0,0.5 1.5,2 0,3.5 0.5,4 2,2.5 3.5,4 "/>
            <path id="heart" class="particle" d="M2.9,0C2.53,0,2.2,0.18,2,0.47C1.8,0.18,1.47,0,1.1,0C0.49,0,0,0.49,0,1.1
               C0,2.6,1.56,4,2,4s2-1.4,2-2.9C4,0.49,3.51,0,2.9,0z"/>
            <radialGradient id="grad" cx="3" cy="3" r="6" gradientUnits="userSpaceOnUse">
               <stop  offset="0" style="stop-color:red"/>
               <stop  offset="0.4" style="stop-color:#334673"/>
               <stop  offset="0.6" style="stop-color:#EDDDC4"/>
               <stop  offset="0.9" style="stop-color:#FEE8C7"/>
               <stop  offset="1" style="stop-color:red"/>
            </radialGradient>
            <radialGradient id="dotGrad" cx="0" cy="0" r="50" gradientUnits="userSpaceOnUse">
               <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:1"/>
               <stop  offset="0.1" style="stop-color:#0867C7;stop-opacity:0.6"/>
               <stop  offset="1" style="stop-color:#081029;stop-opacity:0"/>
            </radialGradient>
            <mask id="treePathMask">
               <path class="treePathMask" fill="none" stroke-width="18" stroke="#FFF" d="M252.9,447.9c0,0-30.8-21.6,33.9-44.7c64.7-23.1,46.2-37,33.9-41.6
                  c-12.3-4.6-59.3-11.6-42.4-28.5s114-52.4,81.7-66.2c-32.4-13.9-58.5-10.8-35.4-29.3s66.2-101.7,70.9-115.6
                  c4.4-13.2,16.9-18.5,24.7,0c7.7,18.5,44.7,100.1,67.8,115.6c23.1,15.4-10.8,21.6-26.2,24.7c-15.4,3.1-20,33.9,33.9,49.3
                  c53.9,15.4,47.8,40.1,27.7,44.7c-20,4.6-63.2,4.6-27.7,32.4s98.6,21.6,61.6,60.1"/>
            </mask>
            <mask id="treeBottomMask">
               <path class="treeBottomMask" stroke="#FFF" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9"/>
            </mask>
            <mask id="treePotMask">
               <path class="treePotMask" stroke="#FFF" stroke-width="8" d="M374.3,502.5c0,0-4.6,20,7.7,29.3c12.3,9.2,40.1,7.7,50.8,0s10.8-23.1,10.8-29.3"/>
            </mask>
            <filter id="glow" x="-150%" y="-150%" width="280%" height="280%">
               <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
               <feGaussianBlur in="offOut" stdDeviation="16" result="blur" />
               <feComponentTransfer>
                  <feFuncR type="discrete" tableValues="0.8"/>
                  <feFuncG type="discrete" tableValues="0.3"/>
                  <feFuncB type="discrete" tableValues="0.2"/>
               </feComponentTransfer>
               <feComposite in="SourceGraphic" operator="over" />
            </filter>
         </defs>
         <g class="whole">
            <g class="pContainer" ></g>
            <g class="tree" mask="url(#treePathMask)"  >
               <path d="M252.95,447.85a20.43,20.43,0,0,1-5.64-6.24,14,14,0,0,1-1.91-8.22,16.93,16.93,0,0,1,3.06-8,33.16,33.16,0,0,1,5.79-6.28A74.78,74.78,0,0,1,268.54,410a163.48,163.48,0,0,1,15.52-6.84c10.54-3.93,21-8.07,30.72-13.46a80.83,80.83,0,0,0,7-4.37,37.51,37.51,0,0,0,6.13-5.24c1.75-1.92,3.14-4.18,3.25-6.35s-1.12-4.18-3-5.81a25,25,0,0,0-6.72-3.91,61.25,61.25,0,0,0-7.8-2.42c-5.41-1.4-10.91-2.72-16.38-4.32a84.17,84.17,0,0,1-16.2-6.19,28.26,28.26,0,0,1-3.86-2.5,15.06,15.06,0,0,1-3.44-3.63,9,9,0,0,1-1.51-5.47,10.22,10.22,0,0,1,.61-2.78,12.88,12.88,0,0,1,1.2-2.34,26.73,26.73,0,0,1,6.58-6.56c2.35-1.76,4.76-3.33,7.19-4.84,4.87-3,9.82-5.75,14.77-8.46,9.91-5.4,19.88-10.59,29.63-16.08,4.87-2.75,9.68-5.56,14.33-8.56A81.88,81.88,0,0,0,359.45,280a23,23,0,0,0,2.41-2.79,8.36,8.36,0,0,0,1.35-2.65,2.13,2.13,0,0,0-.17-1.7,5.53,5.53,0,0,0-1.88-1.77,13.15,13.15,0,0,0-1.49-.83c-.52-.26-1.1-.49-1.76-.77-1.27-.53-2.55-1-3.83-1.53q-3.86-1.48-7.8-2.77c-5.26-1.74-10.6-3.23-16-4.79-2.72-.79-5.47-1.58-8.29-2.61a31.74,31.74,0,0,1-4.33-1.92,14.39,14.39,0,0,1-2.29-1.53,8.74,8.74,0,0,1-2.22-2.66,7.2,7.2,0,0,1-.78-4,9.09,9.09,0,0,1,1-3.24,18.93,18.93,0,0,1,3-4.21,44.88,44.88,0,0,1,3.29-3.19c.56-.5,1.12-1,1.68-1.45l1.61-1.33a84,84,0,0,0,10.88-11.88,326.2,326.2,0,0,0,18.79-27.53c5.88-9.5,11.48-19.19,16.89-29S380.1,146.16,385,136.13c1.22-2.51,2.42-5,3.57-7.54s2.29-5.09,3.14-7.45l.36-1c.14-.38.26-.75.42-1.12.29-.75.64-1.48,1-2.21a25.51,25.51,0,0,1,2.65-4.21,19.15,19.15,0,0,1,3.76-3.69,13.74,13.74,0,0,1,5.24-2.42,12.11,12.11,0,0,1,6.12.25,14.59,14.59,0,0,1,5,2.79,20.59,20.59,0,0,1,3.47,3.79,30.33,30.33,0,0,1,2.5,4.1c.35.7.7,1.39,1,2.1l.46,1.05.4,1,1.64,3.84,3.39,7.67q6.88,15.32,14.36,30.37c5,10,10.18,19.94,15.69,29.65a274.94,274.94,0,0,0,17.9,28A73.36,73.36,0,0,0,487.74,233c.49.4,1,.8,1.48,1.15l1.7,1.19a35,35,0,0,1,3.66,3,17.84,17.84,0,0,1,3.32,4.08,10.83,10.83,0,0,1,1.14,2.94,8.54,8.54,0,0,1,0,3.54,10.27,10.27,0,0,1-3.22,5.39,20.71,20.71,0,0,1-4.15,2.91,49,49,0,0,1-8.4,3.46,154,154,0,0,1-16.77,4.09l-4.15.81a9.18,9.18,0,0,0-2.87,1.08,9.51,9.51,0,0,0-4,4.7,12.55,12.55,0,0,0-.67,6.58,19.5,19.5,0,0,0,2.46,6.74A37.19,37.19,0,0,0,468,295.75a75,75,0,0,0,14.14,7.86,129.67,129.67,0,0,0,15.58,5.49A141.4,141.4,0,0,1,513.88,315a75,75,0,0,1,15.19,8.65,37.29,37.29,0,0,1,6.55,6.24,21.05,21.05,0,0,1,4.31,8.49,14.43,14.43,0,0,1-1.24,9.88,18.08,18.08,0,0,1-6.66,6.94,26.74,26.74,0,0,1-8.56,3.33c-2.84.61-5.65,1.06-8.44,1.49-5.58.86-11.13,1.61-16.52,2.77a53.48,53.48,0,0,0-7.81,2.22c-2.43.94-4.81,2.22-6,3.93a4.34,4.34,0,0,0-.77,2.82,8.45,8.45,0,0,0,1,3.29,28,28,0,0,0,4.82,6.25,80.74,80.74,0,0,0,12.81,10.4c9.29,6,19.72,10.29,30.24,14.17,5.27,1.95,10.59,3.79,15.85,5.86,2.63,1,5.24,2.14,7.79,3.39a37.94,37.94,0,0,1,7.28,4.51,11.9,11.9,0,0,1,3.63,15.57,34.68,34.68,0,0,1-4.53,7.16,77.45,77.45,0,0,1-5.64,6.29,77.31,77.31,0,0,0,5.41-6.46,34.27,34.27,0,0,0,4.22-7.21,12.64,12.64,0,0,0,.88-8,12.44,12.44,0,0,0-4.71-6.43,37.71,37.71,0,0,0-7.15-4.16c-2.53-1.16-5.13-2.18-7.76-3.14-5.26-1.91-10.62-3.62-16-5.44-10.65-3.63-21.34-7.64-31.11-13.64a83.84,83.84,0,0,1-13.61-10.49,31.27,31.27,0,0,1-5.6-6.94,12,12,0,0,1-1.55-4.68,8.17,8.17,0,0,1,.19-2.7,8.56,8.56,0,0,1,1.09-2.5,12.1,12.1,0,0,1,3.6-3.44,24.27,24.27,0,0,1,4.08-2.08,57.3,57.3,0,0,1,8.36-2.56c5.59-1.31,11.19-2.17,16.71-3.12,2.76-.48,5.5-1,8.15-1.59a22.1,22.1,0,0,0,7-2.87,13.3,13.3,0,0,0,4.82-5.15,9.42,9.42,0,0,0,.69-6.53,16,16,0,0,0-3.42-6.33,33.25,33.25,0,0,0-5.73-5.27,69.74,69.74,0,0,0-14.19-7.8,135.81,135.81,0,0,0-15.61-5.42,135.53,135.53,0,0,1-16.3-5.51,81,81,0,0,1-15.41-8.31,43.39,43.39,0,0,1-12.6-13,25.53,25.53,0,0,1-3.34-9,19.13,19.13,0,0,1,1-10,16.17,16.17,0,0,1,6.69-8,15.88,15.88,0,0,1,5-1.93l4.13-.84a147.75,147.75,0,0,0,16-4,42.41,42.41,0,0,0,7.17-3,14,14,0,0,0,2.74-1.92,3.42,3.42,0,0,0,1.12-1.68,2.41,2.41,0,0,0-.43-1.61,11.07,11.07,0,0,0-2-2.4,28,28,0,0,0-2.92-2.31l-1.76-1.22c-.65-.46-1.26-.94-1.86-1.43a59,59,0,0,1-6.43-6.27c-2-2.19-3.79-4.44-5.54-6.74a267,267,0,0,1-18.55-28.74c-5.63-9.85-10.89-19.86-16-30s-9.91-20.31-14.57-30.61l-3.45-7.76L417,124.48l-.42-1-.39-.88c-.25-.59-.54-1.15-.82-1.71a22.74,22.74,0,0,0-1.89-3.09,13,13,0,0,0-2.2-2.42,7,7,0,0,0-2.31-1.33,4.49,4.49,0,0,0-2.22-.09,8.55,8.55,0,0,0-4.59,3.32,17.85,17.85,0,0,0-1.84,2.92c-.26.54-.51,1.07-.73,1.64-.12.27-.22.56-.32.85l-.35,1c-1.06,2.93-2.23,5.47-3.42,8.1s-2.42,5.16-3.67,7.7c-5,10.18-10.29,20.16-15.77,30.05s-11.17,19.66-17.16,29.28a310.2,310.2,0,0,1-19.39,28.11,90.46,90.46,0,0,1-12,12.85l-1.65,1.35c-.52.43-1,.85-1.53,1.29a38,38,0,0,0-2.79,2.65,12.42,12.42,0,0,0-1.94,2.57,2.33,2.33,0,0,0-.28.76c0,.11,0,0,0,.09a4.57,4.57,0,0,0,1.7,1.35,25.15,25.15,0,0,0,3.36,1.51c2.46.92,5.11,1.72,7.79,2.52,5.36,1.58,10.84,3.16,16.25,5q4.06,1.37,8.08,2.94c1.34.53,2.67,1.07,4,1.63.64.27,1.36.57,2.1.94a19.66,19.66,0,0,1,2.18,1.24,11.85,11.85,0,0,1,4,4.13,8.64,8.64,0,0,1,1,3.24,9.11,9.11,0,0,1-.27,3.23,14.48,14.48,0,0,1-2.42,4.85,29.32,29.32,0,0,1-3.14,3.56,87.46,87.46,0,0,1-14,10.47c-4.85,3-9.79,5.84-14.76,8.55-9.94,5.42-20,10.49-29.91,15.72-5,2.62-9.88,5.28-14.63,8.12-2.37,1.42-4.7,2.89-6.88,4.46a22.06,22.06,0,0,0-5.45,5.14,8,8,0,0,0-.76,1.39,5.36,5.36,0,0,0-.33,1.32,4.1,4.1,0,0,0,.69,2.53,15.62,15.62,0,0,0,5.49,4.62A80.14,80.14,0,0,0,298.56,353c5.31,1.66,10.73,3.06,16.18,4.58a64.81,64.81,0,0,1,8.26,2.74,27.74,27.74,0,0,1,7.69,4.74,13.65,13.65,0,0,1,3,3.81,9.27,9.27,0,0,1,1,5,11.14,11.14,0,0,1-1.54,4.7,19.09,19.09,0,0,1-2.8,3.67,40.6,40.6,0,0,1-6.81,5.54,83.78,83.78,0,0,1-7.41,4.35c-10.11,5.26-20.76,9.16-31.39,12.82a161.69,161.69,0,0,0-15.52,6.37A74.57,74.57,0,0,0,255,420a32.17,32.17,0,0,0-5.82,5.89,16.21,16.21,0,0,0-3.19,7.52,13.61,13.61,0,0,0,1.59,8A20.29,20.29,0,0,0,252.95,447.85Z" fill="#3FB06B"/>
               <path d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#3FB06B"/>
               <path d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#3FB06B"/>
            </g>
            <path class="treeBottomPath" stroke="none" fill="none" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9"/>
            <path  class="treePath" fill="none" stroke="none" stroke-miterlimit="10" d="M252.95,447.85s-30.81-21.57,33.89-44.68,46.22-37,33.89-41.6-59.32-11.56-42.37-28.5,114-52.38,81.66-66.25S301.48,256,324.59,237.55,390.84,135.87,395.46,122c4.41-13.24,16.95-18.49,24.65,0s44.68,100.14,67.79,115.55-10.78,21.57-26.19,24.65-20,33.89,33.89,49.3,47.76,40.06,27.73,44.68-63.17,4.62-27.73,32.35,98.6,21.57,61.63,60.09"/>
            <path class="treeBottom" mask="url(#treeBottomMask)" d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#FFFEFA"/>
            <path class="treePot" mask="url(#treePotMask)" d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#A3510A"/>
            <g class="treeStar" >
               <path class="treeStarOutline" opacity="0" d="M421,53.27c5,.83,10.08,1.52,15.15,2.13l3.8.45,1.9.21c.33,0,.6.06,1,.12a2.41,2.41,0,0,1,1.27.66,2.52,2.52,0,0,1,.56,2.76,3.42,3.42,0,0,1-.78,1.07l-.66.69-2.65,2.77c-1.78,1.83-3.54,3.68-5.35,5.48l-2.7,2.71L429.81,75l-.69.67-.34.33,0,0h0a.14.14,0,0,0,0-.08s0-.07,0,0l0,.24.07.47.57,3.78c.4,2.52.71,5,1.06,7.57l.94,7.59.22,1.9c0,.06,0,.19,0,.34a2.21,2.21,0,0,1,0,.43,2.72,2.72,0,0,1-.21.84,2.85,2.85,0,0,1-2.65,1.75,2.57,2.57,0,0,1-.82-.14,3.12,3.12,0,0,1-.65-.3l-1.64-1-6.58-3.91-6.63-3.81-3.34-1.86-.42-.23-.21-.12-.14-.07a1,1,0,0,0-.59,0,1.15,1.15,0,0,0-.31.12l-.43.22-.85.44c-2.27,1.17-4.54,2.31-6.79,3.52s-4.51,2.38-6.74,3.61l-3.36,1.83-.84.46a3.07,3.07,0,0,1-1.28.44,2.68,2.68,0,0,1-2.84-3l.15-1,.29-1.89.57-3.78,1.18-7.56,1.24-7.52a.13.13,0,0,0,0,.08l0,0-.1-.09-.17-.17-1.37-1.34-2.73-2.68-10.93-10.7-.34-.33a4,4,0,0,1-.64-.84,3.63,3.63,0,0,1-.43-2.12,3.68,3.68,0,0,1,2.64-3.17l.52-.11.25,0,.47-.06.95-.12,1.9-.25,7.58-1,7.6-.9,1.9-.23.95-.11c.24,0,.11,0,.09,0l-.09.05-.07.08,0,0,.09-.16.46-.84.91-1.68c2.41-4.5,4.95-8.92,7.51-13.34l1-1.66.48-.83.24-.41.13-.23a3.49,3.49,0,0,1,.22-.33,2.66,2.66,0,0,1,2.83-.9,2.52,2.52,0,0,1,1.26.84,2.85,2.85,0,0,1,.37.62l.18.44q1.45,3.54,3,7.06c1,2.36,2,4.68,3.06,7,.51,1.17,1.06,2.32,1.59,3.48l.8,1.74a2.12,2.12,0,0,0,.45.75A1.42,1.42,0,0,0,421,53.27Zm-.06.39a1.82,1.82,0,0,1-1-.46,2.52,2.52,0,0,1-.56-.86l-.84-1.72c-.56-1.14-1.11-2.3-1.69-3.43-1.17-2.27-2.29-4.56-3.5-6.81s-2.39-4.51-3.6-6.76l-.23-.42a.8.8,0,0,0-.14-.18.58.58,0,0,0-.33-.15.56.56,0,0,0-.57.28L407,36.48c-2.09,4.66-4.2,9.31-6.45,13.88l-.83,1.72-.42.86-.13.27a3.57,3.57,0,0,1-2,1.67,4.26,4.26,0,0,1-.84.18l-.95.13-1.89.27L386,56.53l-7.58,1-3.49.44a.45.45,0,0,0,.34-.4.51.51,0,0,0-.07-.28s-.06-.08-.07-.08l.33.34,10.65,11,2.66,2.75,1.33,1.37.4.42a3.41,3.41,0,0,1,.53.84,3.36,3.36,0,0,1,.24,1.95c-.53,2.56-1,5-1.57,7.52L388,90.85l-.83,3.73-.42,1.87-.2.9a.5.5,0,0,0,0,.3.58.58,0,0,0,.52.37,6.28,6.28,0,0,0,1.38-.58l3.46-1.62q3.47-1.61,6.9-3.3c2.3-1.1,4.57-2.26,6.85-3.39l.86-.43.43-.21a2.55,2.55,0,0,1,.57-.22,2.21,2.21,0,0,1,1.29.08l.29.13.21.11.42.23,3.37,1.81,6.8,3.51,6.85,3.41,1.71.85c.19.09.15.07.22.08a.25.25,0,0,0,.12,0,.42.42,0,0,0,.21-.1.33.33,0,0,0,.1-.19.2.2,0,0,0,0-.09.1.1,0,0,0,0,0l0-.13L428.74,96l-1.42-7.52c-.43-2.51-.9-5-1.29-7.54l-.6-3.78-.08-.47,0-.24a3.75,3.75,0,0,1,0-.45,3.37,3.37,0,0,1,.52-1.9,3.33,3.33,0,0,1,.3-.4,3.73,3.73,0,0,1,.3-.3l.35-.32.7-.65,2.81-2.59,2.86-2.54c1.9-1.71,3.84-3.36,5.77-5l2.91-2.49a12.91,12.91,0,0,0,1.15-1,.7.7,0,0,0-.06-.79.73.73,0,0,0-.37-.26c-.23-.06-.6-.13-.89-.2l-1.87-.4L436,56.39C431,55.39,426,54.45,420.95,53.66Z" fill="#FFFCF9" />
               <path  d="M408.12,83.45l-17.78,8.94,3.72-19.55-14-14.15,19.74-2.5,9.13-17.68,8.48,18L437,59.73l-14.5,13.63,3,19.67Z" fill="#EDC60C"/>
            </g>
            <circle class="sparkle" fill="url(#dotGrad)" cx="0" cy="0" r="50"/>
         </g>
      </svg>
<!-- 逆境清醒https://blog.csdn.net/weixin_69553582收集整理,请原作者联系我补充相关的作者信息 -->

  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<script src='https://assets.codepen.io/16327/MorphSVGPlugin3.min.js'></script>
<script src='https://assets.codepen.io/16327/DrawSVGPlugin3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js'></script>
<script src='https://assets.codepen.io/16327/Physics2DPlugin3.min.js'></script>
<script>
MorphSVGPlugin.convertToPath('polygon');
var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    pContainer = select('.pContainer'),
    mainSVG = select('.mainSVG'),
    star = select('#star'),
    sparkle = select('.sparkle'),
    tree = select('#tree'),
    showParticle = true,
    particleColorArray = ['#E8F6F8', '#ACE8F8', '#F6FBFE', '#A2CBDC', '#B74551', '#5DBA72', '#910B28', '#910B28', '#446D39'],
    particleTypeArray = ['#star', '#circ', '#cross', '#heart'],
    particlePool = [],
    particleCount = 0,
    numParticles = 201


gsap.set('svg', {
    visibility: 'visible'
})

gsap.set(sparkle, {
    transformOrigin: '50% 50%',
    y: -100
})

let getSVGPoints = (path) => {

    let arr = []
    var rawPath = MotionPathPlugin.getRawPath(path)[0];
    rawPath.forEach((el, value) => {
        let obj = {}
        obj.x = rawPath[value * 2]
        obj.y = rawPath[(value * 2) + 1]
        if (value % 2) {
            arr.push(obj)
        }
    })

    return arr;
}
let treePath = getSVGPoints('.treePath')

var treeBottomPath = getSVGPoints('.treeBottomPath')

var mainTl = gsap.timeline({
        delay: 0,
        repeat: 0
    }),
    starTl;

function flicker(p) {
    gsap.killTweensOf(p, {
        opacity: true
    });
    gsap.fromTo(p, {
        opacity: 1
    }, {
        duration: 0.07,
        opacity: Math.random(),
        repeat: -1
    })
}

function createParticles() {
    var i = numParticles,
        p, particleTl, step = numParticles / treePath.length,
        pos;
    while (--i > -1) {

        p = select(particleTypeArray[i % particleTypeArray.length]).cloneNode(true);
        mainSVG.appendChild(p);
        p.setAttribute('fill', particleColorArray[i % particleColorArray.length]);
        p.setAttribute('class', "particle");
        particlePool.push(p);
        gsap.set(p, {
            x: -100,
            y: -100,
            transformOrigin: '50% 50%'
        })



    }

}

var getScale = gsap.utils.random(0.5, 3, 0.001, true);

function playParticle(p) {
    if (!showParticle) {
        return
    };
    var p = particlePool[particleCount]
    gsap.set(p, {
        x: gsap.getProperty('.pContainer', 'x'),
        y: gsap.getProperty('.pContainer', 'y'),
        scale: getScale()
    });
    var tl = gsap.timeline();
    tl.to(p, {
        duration: gsap.utils.random(0.61, 6),
        physics2D: {
            velocity: gsap.utils.random(-23, 23),
            angle: gsap.utils.random(-180, 180),
            gravity: gsap.utils.random(-6, 50)
        },
        scale: 0,
        rotation: gsap.utils.random(-123, 360),
        ease: 'power1',
        onStart: flicker,
        onStartParams: [p],
        onRepeat: (p) => {
            gsap.set(p, {
                scale: getScale()
            })
        },
        onRepeatParams: [p]

    });
    particleCount++;
    particleCount = (particleCount >= numParticles) ? 0 : particleCount

}

function drawStar() {

    starTl = gsap.timeline({
        onUpdate: playParticle
    })
    starTl.to('.pContainer, .sparkle', {
            duration: 6,
            motionPath: {
                path: '.treePath',
                autoRotate: false
            },
            ease: 'linear'
        })
        .to('.pContainer, .sparkle', {
            duration: 1,
            onStart: function() {
                showParticle = false
            },
            x: treeBottomPath[0].x,
            y: treeBottomPath[0].y
        })
        .to('.pContainer, .sparkle', {
            duration: 2,
            onStart: function() {
                showParticle = true
            },
            motionPath: {
                path: '.treeBottomPath',
                autoRotate: false
            },
            ease: 'linear'
        }, '-=0')
        .from('.treeBottomMask', {
            duration: 2,
            drawSVG: '0% 0%',
            stroke: '#FFF',
            ease: 'linear'
        }, '-=2')
}

createParticles();
drawStar();

mainTl.from(['.treePathMask', '.treePotMask'], {
        duration: 6,
        drawSVG: '0% 0%',
        stroke: '#FFF',
        stagger: {
            each: 6
        },
        duration: gsap.utils.wrap([6, 1, 2]),
        ease: 'linear'
    })
    .from('.treeStar', {
        duration: 3,
        scaleY: 0,
        scaleX: 0.15,
        transformOrigin: '50% 50%',
        ease: 'elastic(1,0.5)'
    }, '-=4')

    .to('.sparkle', {
        duration: 3,
        opacity: 0,
        ease: "rough({strength: 2, points: 100, template: linear, taper: both, randomize: true, clamp: false})"
    }, '-=0')
    .to('.treeStarOutline', {
        duration: 1,
        opacity: 1,
        ease: "rough({strength: 2, points: 16, template: linear, taper: none, randomize: true, clamp: false})"
    }, '+=1')

mainTl.add(starTl, 0)
gsap.globalTimeline.timeScale(1.5);
</script>
</body>
</html>

27d5b50d93a089da35ee1a28905f9719.jpeg​​​​

c64d8b4d0b6842ebe1196c0b1e3fba51.jpeg​​​​

a136a43cd0015088d4ce37b1bb653533.jpeg​​​​

给照片换底色(python+opencv)猫十二分类基于大模型的虚拟数字人__虚拟主播实例

0f92b28e915ca3cc26cfaaf47c5fc62d.jpeg

5d2b51be3e7e932be95355088e17d524.jpeg

3cf3fe3c1a186bfcbf12d4755b8950ae.jpeg

计算机视觉__基本图像操作(显示、读取、保存)直方图(颜色直方图、灰度直方图)直方图均衡化(调节图像亮度、对比度)

849b7a72434213407c862c8f8e071a22.png

9412a31659ba6db83d806c3f354dd1c0.png​​​​​​​

fb29a865f75af8352dca5e3d56a09004.png​​​​​​​

语音识别实战(python代码)(一)

 人工智能基础篇

 计算机视觉基础__图像特征

逆境清醒

637c349e8206c0651d1f2751ba128912.png​​​​​​​

 matplotlib 自带绘图样式效果展示速查(28种,全)

ec9793633e16de7b52fbf0b74ecfa2f3.png​​​​​​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一)

6e420cca6a1313b93948785f689f5723.png​​​​​​​

1da3f182e081ad8f3cfcf53013909b8b.png​​​​​​​

ca733c1a99c6457a762d0e503855ce79.png​​​​​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

 Python 3D可视化(一)

让你的作品更出色——词云Word Cloud的制作方法(基于python,WordCloud,stylecloud)

f92dfeb72ec683025a63db2fe8a26492.png​​​​​​​

1b2a866ebb074a1e5859dad42c435d5c.jpeg​​​​​​​

8207b63755bf37b10807a046080f14df.png​​​​​​​

 python Format()函数的用法___实例详解(一)(全,例多)___各种格式化替换,format对齐打印

 用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

python爱心源代码集锦(18款)

b97d56fe7e3ce6234cb182ad86fef4ed.jpeg​​​​​​​

6871f222e7db3f8ce83336ad50311c3a.png​​​​​​​

b89ed1147e8a76e6c64b812d65e8f2ef.png​​​​​​​

 Python中Print()函数的用法___实例详解(全,例多)

 Python函数方法实例详解全集(更新中...)

 《 Python List 列表全实例详解系列(一)》__系列总目录、列表概念

7090a17485b11d9da69e37e5756c6910.png​​​​​​​

50313523c8c19f29270fb1110fe66ae9.png​​​​​​​

用代码过中秋,python海龟月饼你要不要尝一口?

 python练习题目录

4c77c7a60782637db9e27b3deec7abee.png​​​​​​​

c397ed3a22c7885194eb92b5b3883322.png​​​​​​​

a18fbd27f15eaa98f0bb5a4fed8cbd8b.png​​​​​​​

草莓熊python turtle绘图(风车版)附源代码

 ​草莓熊python turtle绘图代码(玫瑰花版)附源代码

 ​草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码

36e2af3bf474c59b9c430b223417793b.png​​​​​​​

542dbf91cfafa23e1ccdee94a7b22397.png​​​​​​​

 巴斯光年python turtle绘图__附源代码

皮卡丘python turtle海龟绘图(电力球版)附源代码

68b0f4704053ab870c16bb4e37897d63.png​​​​​​​

25ff4b8d741f0942c50dd96b7e866386.jpeg​​​​​​​

59bb0955631256520f0edd17f8304669.jpeg​​​​​​​

 Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细)

 色彩颜色对照表(一)(16进制、RGB、CMYK、HSV、中英文名)

2024年12月多家权威机构____编程语言排行榜__薪酬状况

7dda70990181a20a430cc7b13dc9d8aa.png

a1fea2de0187913a4cdb18473c512c55.png​​​​​​​

96e1df3760ce3017026da2d1de069869.png​​​​​​​

 手机屏幕坏了____怎么把里面的资料导出(18种方法)

【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向)

 查看jdk安装路径,在windows上实现多个java jdk的共存解决办法,安装java19后终端乱码的解决

fa753f11d26d967646a85b78b53dc703.png​​​​​​​

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

4290a52c20eee861ee159e17659342f5.png​​​​​​​

b126b976989a1e4f1ae40867407e8f4d.png​​​​​​​

15f065b7e46b238db1e7382f70fd7076.png​​​​​​​

2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特

 别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(4套)

SVG实例详解系列(一)(svg概述、位图和矢量图区别(图解)、SVG应用实例)

f3a00b9bf85e8d36c21d8e9785f43a53.png​​​​​​​

1f143789d9652fd35c1fabf11b6f149c.png​​​​​​​

2c8047a9f87aa22a8abe57ad0081b1d9.png​​​​​​​

【程序人生】卡塔尔世界杯元素python海龟绘图(附源代码),世界杯主题前端特效5个(附源码)HTML+CSS+svg绘制精美彩色闪灯圣诞树,HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

 2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)(附完整源代码及资源免费下载)

a01e7c6663c27936b3c174265db14012.png​​​​​​​

6d12eed561af36157625a07b771f9b0b.png​​​​​​​

af9dcebc4110cf5b9a012a3ef7d268fe.png​​​​​​​

 tomcat11、tomcat10 安装配置(Windows环境)(详细图文)

 Tomcat端口配置(详细)

 Tomcat 启动闪退问题解决集(八大类详细)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逆境清醒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值