css实现一个窗前下雪的圣诞树彩灯闪烁动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现一个窗前下雪的圣诞树彩灯闪烁动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  --h: 170;
  --s: 100%;
  --base: hsl(var(--h), var(--s), 50%);
  --c1: hsl(var(--h), var(--s), 5%);
  --c2: hsl(var(--h), var(--s), 10%);
  --c25: hsl(var(--h), var(--s), 12.5%);
  --c3: hsl(var(--h), var(--s), 15%);
  --c35: hsl(var(--h), var(--s), 17%);
  --c4: hsl(var(--h), var(--s), 20%);
  --c5: hsl(var(--h), var(--s), 25%);
  --c6: hsl(var(--h), var(--s), 30%);
  --c7: hsl(var(--h), var(--s), 35%);
  --c8: hsl(var(--h), var(--s), 40%);
  --c9: hsl(var(--h), var(--s), 45%);
  --c10: hsl(var(--h), var(--s), 50%);
  --c11: hsl(var(--h), var(--s), 55%);
  --c12: hsl(var(--h), var(--s), 60%);
  --c13: hsl(var(--h), var(--s), 65%);
  --c14: hsl(var(--h), var(--s), 70%);
  --c15: hsl(var(--h), var(--s), 75%);
  --c16: hsl(var(--h), var(--s), 80%);
  --c17: hsl(var(--h), var(--s), 85%);
  --c18: hsl(var(--h), var(--s), 90%);
  --c19: hsl(var(--h), var(--s), 95%);
  --c20: hsl(var(--h), var(--s), 100%);
}

body {
  margin: 0;
  font-family: Georgia, serif;
}

.salon {
  position: relative;
  z-index: 0;
  height: 80vmin;
  width: 100vmin;
  margin: 10vmin auto;
  overflow: hidden;
  background: var(--c4);
  box-shadow: inset 0 -130px 150px -100px var(--c2);
}

.salon div,
*:before,
*:after {
  position: absolute;
}

.tree {
  width: 60%;
  height: 86%;
  background: var(--c2);
  left: 50%;
  transform: translatex(-50%);
  bottom: 0;
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 80% 70%, 86% 71%, 70% 45%, 74% 46%, 60% 25%, 63% 26%, 54% 10%, 57% 12%, 50% 0%, 43% 11%, 46% 10%, 37% 27%, 40% 26%, 26% 49%, 30% 47%, 14% 75%, 20% 73%);
          clip-path: polygon(0% 100%, 100% 100%, 80% 70%, 86% 71%, 70% 45%, 74% 46%, 60% 25%, 63% 26%, 54% 10%, 57% 12%, 50% 0%, 43% 11%, 46% 10%, 37% 27%, 40% 26%, 26% 49%, 30% 47%, 14% 75%, 20% 73%);
}

.tree:before {
  content: "";
  width: 60vmin;
  height: 30vmin;
  top: 2vmin;
  left: -30vmin;
  border: 1px solid var(--c6);
  transform: rotate(-20deg) skew(35deg);
  box-shadow: -1.72vmin 47vmin 0 var(--c2), -1.72vmin 47vmin 0 1px var(--c6);
}

.tree:after {
  content: "";
  width: 1vmin;
  height: 1vmin;
  border-radius: 50%;
  color: tomato;
  background: currentcolor;
  top: 7vmin;
  left: 28vmin;
  --light-color1: wheat;
  --light-color2: tomato;
  --light-color3: orangered;
  box-shadow: 2.4vmin 1.8vmin 0 0 var(--light-color1), 4.9vmin 3.4vmin 0 0 var(--light-color2), -7vmin 18vmin 0 0 var(--light-color3), -4vmin 17vmin 0 0 var(--light-color1), -1vmin 16vmin 0 0 var(--light-color2), 2vmin 15vmin 0 0 var(--light-color3), 5vmin 13.75vmin 0 0 var(--light-color1), 8vmin 12.75vmin 0 0 var(--light-color2), -16vmin 39.5vmin 0 0 var(--light-color2), -13vmin 38.5vmin 0 0 var(--light-color3), -10vmin 37.25vmin 0 0 var(--light-color1), -7vmin 36.25vmin 0 0 var(--light-color2), -4vmin 35.25vmin 0 0 var(--light-color3), -1vmin 34.15vmin 0 0 var(--light-color1), 2vmin 33vmin 0 0 var(--light-color2), 5vmin 32vmin 0 0 var(--light-color3), 8vmin 30.85vmin 0 0 var(--light-color1), 11vmin 29.75vmin 0 0 var(--light-color2), 14vmin 28.75vmin 0 0 var(--light-color3), -18vmin 49.25vmin 0 0 var(--light-color2), -15.5vmin 51vmin 0 0 var(--light-color3), -13vmin 52.75vmin 0 0 var(--light-color1), -10.5vmin 54.5vmin 0 0 var(--light-color2), -8vmin 56.25vmin 0 0 var(--light-color3), -5.5vmin 58vmin 0 0 var(--light-color1), -3vmin 59.75vmin 0 0 var(--light-color2), 14vmin 60.75vmin 0 0 var(--light-color3), 17vmin 59.5vmin 0 0 var(--light-color1), 20vmin 58.5vmin 0 0 var(--light-color2), 23vmin 57.35vmin 0 0 var(--light-color3), 26vmin 56.25vmin 0 0 var(--light-color1);
  -webkit-animation: lights 0.5s infinite;
          animation: lights 0.5s infinite;
}

@-webkit-keyframes lights {
  50% {
    --light-color1: tomato;
    --light-color2: orangered;
    --light-color3: wheat;
    box-shadow: 2.4vmin 1.8vmin 0 0 var(--light-color1), 4.9vmin 3.4vmin 0 0 var(--light-color2), -7vmin 18vmin 0 0 var(--light-color3), -4vmin 17vmin 0 0 var(--light-color1), -1vmin 16vmin 0 0 var(--light-color2), 2vmin 15vmin 0 0 var(--light-color3), 5vmin 13.75vmin 0 0 var(--light-color1), 8vmin 12.75vmin 0 0 var(--light-color2), -16vmin 39.5vmin 0 0 var(--light-color2), -13vmin 38.5vmin 0 0 var(--light-color3), -10vmin 37.25vmin 0 0 var(--light-color1), -7vmin 36.25vmin 0 0 var(--light-color2), -4vmin 35.25vmin 0 0 var(--light-color3), -1vmin 34.15vmin 0 0 var(--light-color1), 2vmin 33vmin 0 0 var(--light-color2), 5vmin 32vmin 0 0 var(--light-color3), 8vmin 30.85vmin 0 0 var(--light-color1), 11vmin 29.75vmin 0 0 var(--light-color2), 14vmin 28.75vmin 0 0 var(--light-color3), -18vmin 49.25vmin 0 0 var(--light-color2), -15.5vmin 51vmin 0 0 var(--light-color3), -13vmin 52.75vmin 0 0 var(--light-color1), -10.5vmin 54.5vmin 0 0 var(--light-color2), -8vmin 56.25vmin 0 0 var(--light-color3), -5.5vmin 58vmin 0 0 var(--light-color1), -3vmin 59.75vmin 0 0 var(--light-color2), 14vmin 60.75vmin 0 0 var(--light-color3), 17vmin 59.5vmin 0 0 var(--light-color1), 20vmin 58.5vmin 0 0 var(--light-color2), 23vmin 57.35vmin 0 0 var(--light-color3), 26vmin 56.25vmin 0 0 var(--light-color1);
  }
}

@keyframes lights {
  50% {
    --light-color1: tomato;
    --light-color2: orangered;
    --light-color3: wheat;
    box-shadow: 2.4vmin 1.8vmin 0 0 var(--light-color1), 4.9vmin 3.4vmin 0 0 var(--light-color2), -7vmin 18vmin 0 0 var(--light-color3), -4vmin 17vmin 0 0 var(--light-color1), -1vmin 16vmin 0 0 var(--light-color2), 2vmin 15vmin 0 0 var(--light-color3), 5vmin 13.75vmin 0 0 var(--light-color1), 8vmin 12.75vmin 0 0 var(--light-color2), -16vmin 39.5vmin 0 0 var(--light-color2), -13vmin 38.5vmin 0 0 var(--light-color3), -10vmin 37.25vmin 0 0 var(--light-color1), -7vmin 36.25vmin 0 0 var(--light-color2), -4vmin 35.25vmin 0 0 var(--light-color3), -1vmin 34.15vmin 0 0 var(--light-color1), 2vmin 33vmin 0 0 var(--light-color2), 5vmin 32vmin 0 0 var(--light-color3), 8vmin 30.85vmin 0 0 var(--light-color1), 11vmin 29.75vmi.........完整代码请登录后点击上方下载按钮下载查看