纯css实现圣诞树慢慢点亮动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：纯css实现圣诞树慢慢点亮动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
@charset "UTF-8";
#btn--yp {
  box-sizing: content-box;
  position: fixed;
  z-index: 9;
  bottom: 1em;
  right: 1em;
  border: solid 1em transparent;
  width: 4.625em;
  height: 3.25em;

  font: 16px/ 1.25 trebuchet ms, sans-serif;
  text-indent: 200vw;
  text-shadow: none;
  filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
  transition: .5s;
  white-space: nowrap;
}
#btn--yp:before {
  box-sizing: inherit;
  position: absolute;
  left: 0;
  bottom: 100%;
  margin: 1em -.5em;
  padding: .5em;
  width: 100%;
  border-radius: 5px;
  background: #e8e0e0;
  color: #000;
  text-align: center;
  text-decoration: none;
  text-indent: 0vw;
  white-space: normal;
  animation: float 1s ease-in-out infinite alternate;
  content: attr(data-txt);
}
#btn--yp:hover, #btn--yp:focus {
  outline: none;
  filter: grayscale(0) drop-shadow(0 0 1px crimson);
}

@keyframes float {
  to {
    transform: translateY(0.75em);
  }
}
body, div {
  display: grid;
}

body {
  place-content: center;
  overflow-x: hidden;
  margin: 0;
  height: 100vh;
  perspective: 35em;
  background: #000014;
}

div {
  transform-style: preserve-3d;
}

.a3d {
  --m: calc(.5*(var(--n-stars) - 1));
  --t: calc(0.33333*var(--n-stars)*0.1s);
  animation: roty 12s linear var(--t) infinite reverse;
}

@keyframes roty {
  to {
    rotate: y 1turn;
  }
}
.🌟 {
  --q: Min(1, var(--j));
  --p: calc(1 - var(--q));
  --s: calc((1.25*var(--p) + var(--q)*var(--sf))*2em);
  --ay0: calc(var(--i)/var(--n-arms)*1turn);
  --ay1: calc(var(--ay0) - var(--n-loops)*1turn);
  --ay: calc((var(--j)/var(--n-stars)*var(--n-loops) + var(--i)/var(--n-arms))*1turn);
  --tx: calc(var(--q)*var(--rox)*2em);
  --ty0: calc(var(--m)/var(--n-stars)*20em);
  --ty1: calc(-1*var(--ty0) - 0.75*2em);
  --ty: calc((var(--j) - var(--m))/var(--n-stars)*20em + (var(--q)*var(--roy) - var(--p)*0.75)*2em);
  --tz: calc(var(--j)/var(--n-stars)*10em + var(--q)*var(--roz)*2em);
  grid-area: 1/ 1;
  width: var(--s);
  height: var(--s);
  --pos: rotatey(var(--ay)) translate3d(var(--tx), var(--ty), var(--tz)) rotatey(calc(-1*var(--ay)));
  transform: var(--pos);
  --dt: calc(0.33333*(var(--n-stars) - var(--j))*0.1s);
  animation: grow calc(var(--q)*0.1s) ease-out var(--dt) backwards, move calc(var(--p)*var(--t)) linear;
}
.🌟::after {
  opacity: calc(var(--p) + var(--q)*var(--j)/var(--n-stars) + .25);
  background: radial-gradient(#fffacd 10%, rgba(255, 250, 205, 0.2));
  --points: 50% 0%, 53.53553% 41.46447%, 85.35534% 14.64466%, 58.53553% 46.46447%, 100% 50%, 58.53553% 53.53553%, 85.35534% 85.35534%, 53.53553% 58.53553%, 50% 100%, 46.46447% 58.53553%, 14.64466% 85.35534%, 41.46447% 53.53553%, 0% 50%, 41.46447% 46.46447%, 14.64466% 14.64466%, 46.46447% 41.46447%;
  -webkit-clip-path: polygon(var(--points));
  clip-path: polygon(var(--points));
  animation: roty 12s linear var(--t) infinite, puls calc(var(--p)*.1s) ease-in-out infinite alternate, hue 4s linear var(--dt) infinite;
  content: "";
}

@keyframes grow {
  0% {
    transform: var(--pos) scale(0);
  }
}
@keyframes move {
  0% {
    transform: rotatey(var(--ay0)) translate3d(0, var(--ty0), 10em) rotatey(calc(-1*var(--ay0)));
  }
  100% {
    transform: rotatey(var(--ay1)) translate3d(0, var(--ty1), 0) rotatey(calc(-1*var(--ay1)));
  }
}
@keyframes puls {
  to {
    scale: .2;
    opacity: 0.2;
  }
}
@keyframes hue {
  to {
    filter: hue-rotate(360deg);
  }
}
</style>


</head>

<body>
  <style>.🌟:nth-child(n + 1) { --i: 0 }.🌟:nth-child(n + 101) { --i: 1 }.🌟:nth-child(100n + 1) { --j: 0 }.🌟:nth-child(100n + 2) { --j: 1 }.🌟:nth-child(100n + 3) { --j: 2 }.🌟:nth-child(100n + 4) { --j: 3 }.🌟:nth-child(100n + 5) { --j: 4 }.🌟:nth-child(100n + 6) { --j: 5 }.🌟:nth-child(100n + 7) { --j: 6 }.🌟:nth-child(100n + 8) { --j: 7 }.🌟:nth-child(100n + 9) { --j: 8 }.🌟:nth-child(100n + 10) { --j: 9 }.🌟:nth-child(100n + 11) { --j: 10 }.🌟:nth-child(100n + 12) { --j: 11 }.🌟:nth-child(100n + 13) { --j: 12 }.🌟:nth-child(100n + 14) { --j: 13 }.🌟:nth-child(100n + 15) { --j: 14 }.🌟:nth-child(100n + 16) { --j: 15 }.🌟:nth-child(100n + 17) { --j: 16 }.🌟:nth-child(100n + 18) { --j: 17 }.🌟:nth-child(100n + 19) { --j: 18 }.🌟:nth-child(100n + 20) { --j: 19 }.🌟:nth-child(100n + 21) { --j: 20 }.🌟:nth-child(100n + 22) { --j: 21 }.🌟:nth-child(100n + 23) { --j: 22 }.🌟:nth-child(100n + 24) { --j: 23 }.🌟:nth-child(100n + 25) { --j: 24 }.🌟:nth-child(100n + 26) { --j: 25 }.🌟:nth-child(100n + 27) { --j: 26 }.🌟:nth-child(100n + 28) { --j: 27 }.🌟:nth-child(100n + 29) { --j: 28 }.🌟:nth-child(100n + 30) { --j: 29 }.🌟:nth-child(100n + 31) { --j: 30 }.🌟:nth-child(100n + 32) { --j: 31 }.🌟:nth-child(100n + 33) { --j: 32 }.🌟:nth-child(100n + 34) { --j: 33 }.🌟:nth-child(100n + 35) { --j: 34 }.🌟:nth-child(100n + 36) { --j: 35 }.🌟:nth-child(100n + 37) { --j: 36 }.🌟:nth-child(100n + 38) { --j: 37 }.🌟:nth-child(100n + 39) { --j: 38 }.🌟:nth-child(100n + 40) { --j: 39 }.🌟:nth-child(100n + 41) { --j: 40 }.🌟:nth-child(100n + 42) { --j: 41 }.🌟:nt.........完整代码请登录后点击上方下载按钮下载查看