css实现一个带灯闪烁的圣诞树效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一个带灯闪烁的圣诞树效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
:root {
  --background-color: #101B2A;
  --tree-color: #1B885E;
  --yellow: #FFFC5E;
}

body{
  background: var(--background-color);
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 10vmin;
  margin-bottom: 10vmin;
  width: 80vmin;
  height: 80vmin;
}

/* Bottom tree piece */
.tree {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 20vmin;
  width: 0;
  height: 0;
  border-bottom: 32vmin solid var(--tree-color);
  border-right: 32vmin solid transparent;
  border-left: 32vmin solid transparent;
}

/* Tree middle */
.tree::before {
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: -16vmin;
  width: 0;
  height: 0;
  border-bottom: 27vmin solid var(--tree-color);
  border-right: 27vmin solid transparent;
  border-left: 27vmin solid transparent;
}

/* Tree top */
.tree::after {
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0vmin;
  width: 0;
  height: 0;
  border-bottom: 19vmin solid var(--tree-color);
  border-right: 19vmin solid transparent;
  border-left: 19vmin solid transparent;
}

/* Snow back of trunk */
.trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: white;
  width: 50vmin;
  height: 10vmin;
  border-radius: 58% 42% 83% 17% / 44% 39% 61% 56%; 
}

/* Trunk */
.trunk::before {
  content: '';
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #CC7C06;
  bottom: 0;
  width: 10vmin;
  height: 20vmin;
  left: 50%;
}


/* Snow front of trunk */
.trunk::after {
  content: '';
  position: absolute;
  background-color: white;
  bottom: -5vmin;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 40vmin;
  height: 13vmin;
  border-radius: 58% 42% 83% 17% / 44% 39% 61% 56%;
}

.star {
  --star-color: rgba(255, 252, 2, 0.5);
  
  -webkit-animation: starFlash 2s infinite;
  
          animation: starFlash 2s infinite;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  position: absolute;
  top: 2vmin;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 15vmin;
  height: 15vmin;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star::before {
  --star-color: rgba(255, 252, 2, 0.7);
  
  -webkit-animation: starFlash 2s infinite;
  
          animation: starFlash 2s infinite;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 10vmin;
  height: 10vmin;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star::after {
  --star-color: rgba(255, 252, 2, 1);
  
  -webkit-animation: starFlash 2s infinite;
  
          animation: starFlash 2s infinite;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 5vmin;
  height: 5vmin;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%).........完整代码请登录后点击上方下载按钮下载查看