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

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

代码语言：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: inh.........完整代码请登录后点击上方下载按钮下载查看