div+css布局实现闪闪发光的圣诞树效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现闪闪发光的圣诞树效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">
  

<style>
@import url("https://fonts.googleapis.com/css2?family=Doto:wght@500&display=swap");

* {
  box-sizing: border-box;
}

html {
  --bg: #0a0a0a;
  --bg-star: #fde047;
  --bg-tree: #065f46;
  --bg-tree-lighten: #059669;
  --bg-trunk: #451a03;
  --bg-trunk-lighten: #55280c;
  --noise: url("data:image/svg+xml;base64,PHN2ZyBpZD0ibm9pc2UiIHN0eWxlPSJkaXNwbGF5OiBub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0ibm5ub2lzZS1maWx0ZXIiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNDAlIiBoZWlnaHQ9IjE0MCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgcHJpbWl0aXZlVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9ImxpbmVhclJHQiI+CiAgICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjEwMiIgbnVtT2N0YXZlcz0iNCIgc2VlZD0iMTUiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHg9IjAlIiB5PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgcmVzdWx0PSJ0dXJidWxlbmNlIj48L2ZlVHVyYnVsZW5jZT4KICAgICAgPGZlU3BlY3VsYXJMaWdodGluZyBzdXJmYWNlU2NhbGU9IjE0IiBzcGVjdWxhckNvbnN0YW50PSIwLjciIHNwZWN1bGFyRXhwb25lbnQ9IjIwIiBsaWdodGluZy1jb2xvcj0iIzA1OTY2OSIgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBpbj0idHVyYnVsZW5jZSIgcmVzdWx0PSJzcGVjdWxhckxpZ2h0aW5nIj4KICAgICAgICA8ZmVEaXN0YW50TGlnaHQgYXppbXV0aD0iMyIgZWxldmF0aW9uPSI5OSI+PC9mZURpc3RhbnRMaWdodD4KICAgICAgPC9mZVNwZWN1bGFyTGlnaHRpbmc+CgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9yZWN0PgogIDxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSIjMDU5NjY5IiBmaWx0ZXI9InVybCgjbm5ub2lzZS1maWx0ZXIpIj48L3JlY3Q+Cjwvc3ZnPg==");
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  background: var(--bg);
  font-family: "Doto", sans-serif;
  text-transform: uppercase;
}

figure {
  --size: 10vmin;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr calc(var(--size) / 2);
  gap: 0.5vmin;
  justify-items: center;
}

.star {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  inline-size: 0.3vmin;
  block-size: calc(var(--size) / 3);
  background-color: var(--bg-star);
  border-radius: 360px;

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: inherit;
    inline-size: inherit;
    block-size: inherit;
    border-radius: inherit;
  }

  &::before {
    rotate: 60deg;
  }

  &::after {
    rotate: 120deg;
  }
}

.trunk {
  grid-column: 1;
  grid-row: 2 / -1;
  -webkit-margin-before: 1vmin;
          margin-block-start: 1vmin;
  inline-size: calc(var(--size) / 3);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: conic-gradient(
    from -0.65deg at center top,
    var(--bg-trunk-lighten) 50%,
    var(--bg-trunk) 50%
  );
}

.tree {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  justify-items: center;

  * {
    --offset: 97%;
    background: radial-gradient(
        circle at top left,
        transparent,
        var(--bg-tree) 88%
      ),
      var(--noise),
      conic-gradient(
        from -10deg at center 0%,
        var(--bg-tree-lighten) 50%,
        transparent 50%
      );
    inline-size: calc(var(--size) * sqrt(var(--i)));
    aspect-ratio: 1 / cos(30deg);
    -webkit-clip-path: polygon(
      49% 0%,
      0 100%,
      10% var(--offset),
      20% 100%,
      30% var(--offset),
      40% 100%,
      50% var(--offset),
      60% 100%,
      70% var(--offset),
      80% 100%,
      .........完整代码请登录后点击上方下载按钮下载查看