Lovely Christmas tree - HTML + CSS code implementation

preface

When my bestie was in Douyin Aite, I asked me to draw a Christmas tree for her. I was afraid to ask what kind of new trick it was. Since I was my bestie, I could just pet it myself. “Who knows how to draw this thing? I will create a Christmas tree for you using the code, and you can directly crush the ‘phone to draw a Christmas tree’ moments.

I mean, there are a lot of Christmas trees on the Internet now, so you can directly find a template and modify the code to make a Christmas tree, which can save too much trouble than mobile phone painting Christmas tree. You can also “show off your coding skills” in front of your girlfriends and girlfriends (if they’re not in the computer business), and let them feel that we put in the effort to create a unique Christmas tree just for them.

To show you my Christmas tree, click on the link to see: Christmas tree

Okay, without further ado, go directly to the code. Welcome to the “ignorant little girl”. (Smirk)

Code is a bit much, we want to use it directly copy, but don’t forget to give me a small praise ~

html

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

<head>
  <meta charset="UTF-8">
  <title>Codepen-challenge-christmas-tree</title>
</head>

<body>
    <ul class="bgg">
      <li class="sphere"></li>
      <p class="text">Merry Christmas, dear sister</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>
Copy the code

style

<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>
Copy the code

If only the shadow of Sunday (^_-) does not belong to the Shadow of Sunday

Then you can take it to your sister. Hahaha

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Lovely Christmas tree —- HTML + CSS code implementation

preface

html

style

Well, that’s it for Christmas tree code sharing, bye ~

Lovely Christmas tree —- HTML + CSS code implementation

preface

html

style

Well, that’s it for Christmas tree code sharing, bye ~

Related Posts

Optimize the el-Cascader cascade selector in Element-UI. The last level of data is empty and no data is displayed temporarily

ReactFiber node update entry: beginWork

The Mongoose ObjectIds