div+css实现一个多彩点线组成的圣诞树旋转彩灯效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现一个多彩点线组成的圣诞树旋转彩灯效果代码

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

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

<head>

  <meta charset="UTF-8">
  
  
  
<style>
body {
  background: black;
}
body ul {
  padding: 0;
}
body li {
  position: absolute;
  list-style: none;
  top: 20%;
  left: 50%;
  animation: tree 2s ease-in-out infinite;
}
body li:nth-child(1) {
  height: 5.1666666667vh;
  animation-delay: 0.1333333333s;
}
body li:nth-child(2) {
  height: 5.3333333333vh;
  animation-delay: 0.2666666667s;
}
body li:nth-child(3) {
  height: 5.5vh;
  animation-delay: 0.4s;
}
body li:nth-child(4) {
  height: 5.6666666667vh;
  animation-delay: 0.5333333333s;
}
body li:nth-child(5) {
  height: 5.8333333333vh;
  animation-delay: 0.6666666667s;
}
body li:nth-child(6) {
  height: 6vh;
  animation-delay: 0.8s;
}
body li:nth-child(7) {
  height: 6.1666666667vh;
  animation-delay: 0.9333333333s;
}
body li:nth-child(8) {
  height: 6.3333333333vh;
  animation-delay: 1.0666666667s;
}
body li:nth-child(9) {
  height: 6.5vh;
  animation-delay: 1.2s;
}
body li:nth-child(10) {
  height: 6.6666666667vh;
  animation-delay: 1.3333333333s;
}
body li:nth-child(11) {
  height: 6.8333333333vh;
  animation-delay: 1.4666666667s;
}
body li:nth-child(12) {
  height: 7vh;
  animation-delay: 1.6s;
}
body li:nth-child(13) {
  height: 7.1666666667vh;
  animation-delay: 1.7333333333s;
}
body li:nth-child(14) {
  height: 7.3333333333vh;
  animation-delay: 1.8666666667s;
}
body li:nth-child(15) {
  height: 7.5vh;
  animation-delay: 2s;
}
body li:nth-child(16) {
  height: 7.6666666667vh;
  animation-delay: 2.1333333333s;
}
body li:nth-child(17) {
  height: 7.8333333333vh;
  animation-delay: 2.2666666667s;
}
body li:nth-child(18) {
  height: 8vh;
  animation-delay: 2.4s;
}
body li:nth-child(19) {
  height: 8.1666666667vh;
  animation-delay: 2.5333333333s;
}
body li:nth-child(20) {
  height: 8.3333333333vh;
  animation-delay: 2.6666666667s;
}
body li:nth-child(21) {
  height: 8.5vh;
  animation-delay: 2.8s;
}
body li:nth-child(22) {
  height: 8.6666666667vh;
  animation-delay: 2.9333333333s;
}
body li:nth-child(23) {
  height: 8.8333333333vh;
  animation-delay: 3.0666666667s;
}
body li:nth-child(24) {
  height: 9vh;
  animation-delay: 3.2s;
}
body li:nth-child(25) {
  height: 9.1666666667vh;
  animation-delay: 3.3333333333s;
}
body li:nth-child(26) {
  height: 9.3333333333vh;
  animation-delay: 3.4666666667s;
}
body li:nth-child(27) {
  height: 9.5vh;
  animation-delay: 3.6s;
}
body li:nth-child(28) {
  height: 9.6666666667vh;
  animation-delay: 3.7333333333s;
}
body li:nth-child(29) {
  height: 9.8333333333vh;
  animation-delay: 3.8666666667s;
}
body li:nth-child(30) {
  height: 10vh;
  animation-delay: 4s;
}
body li:nth-child(31) {
  height: 10.1666666667vh;
  animation-delay: 4.1333333333s;
}
body li:nth-child(32) {
  height: 10.3333333333vh;
  animation-delay: 4.2666666667s;
}
body li:nth-child(33) {
  height: 10.5vh;
  animation-delay: 4.4s;
}
body li:nth-child(34) {
  height: 10.6666666667vh;
  animation-delay: 4.5333333333s;
}
body li:nth-child(35) {
  height: 10.8333333333vh;
  animation-delay: 4.6666666667s;
}
body li:nth-child(36) {
  height: 11vh;
  animation-delay: 4.8s;
}
body li:nth-child(37) {
  height: 11.1666666667vh;
  animation-delay: 4.9333333333s;
}
body li:nth-child(38) {
  height: 11.3333333333vh;
  animation-delay: 5.0666666667s;
}
body li:nth-child(39) {
  height: 11.5vh;
  animation-delay: 5.2s;
}
body li:nth-child(40) {
  height: 11.6666666667vh;
  animation-delay: 5.3333333333s;
}
body li:nth-child(41) {
  height: 11.8333333333vh;
  animation-delay: 5.4666666667s;
}
body li:nth-child(42) {
  height: 12vh;
  animation-delay: 5.6s;
}
body li:nth-child(43) {
  height: 12.1666666667vh;
  animation-delay: 5.7333333333s;
}
body li:nth-child(44) {
  height: 12.3333333333vh;
  animation-delay: 5.8666666667s;
}
body li:nth-child(45) {
  height: 12.5vh;
  animation-delay: 6s;
}
body li:nth-child(46) {
  height: 12.6666666667vh;
  animation-delay: 6.1333333333s;
}
body li:nth-child(47) {
  height: 12.8333333333vh;
  animation-delay: 6.2666666667s;
}
body li:nth-child(48) {
  height: 13vh;
  animation-delay: 6.4s;
}
body li:nth-child(49) {
  height: 13.1666666667vh;
  animation-delay: 6.5333333333s;
}
body li:nth-child(50) {
  height: 13.3333333333vh;
  animation-delay: 6.6666666667s;
}
body li:nth-child(51) {
  height: 13.5vh;
  animation-delay: 6.8s;
}
body li:nth-child(52) {
  height: 13.6666666667vh;
  animation-delay: 6.9333333333s;
}
body li:nth-child(53) {
  height: 13.8333333333vh;
  animation-delay: 7.0666666667s;
}
body li:nth-child(54) {
  height: 14vh;
  animation-delay: 7.2s;
}
body li:nth-child(55) {
  height: 14.1666666667vh;
  animation-delay: 7.3333333333s;
}
body li:nth-child(56) {
  height: 14.3333333333vh;
  animation-delay: 7.4666666667s;
}
body li:nth-child(57) {
  height: 14.5vh;
  animation-delay: 7.6s;
}
body li:nth-child(58) {
  height: 14.6666666667vh;
  animation-delay: 7.7333333333s;
}
body li:nth-child(59) {
  height: 14.8333333333vh;
  animation-delay: 7.8666666667s;
}
body li:nth-child(60) {
  height: 15vh;
  animation-delay: 8s;
}
body li:nth-child(61) {
  height: 15.1666666667vh;
  animation-delay: 8.1333333333s;
}
body li:nth-child(62) {
  height: 15.3333333333vh;
  animation-delay: 8.2666666667s;
}
body li:nth-child(63) {
  height: 15.5vh;
  animation-delay: 8.4s;
}
body li:nth-child(64) {
  height: 15.6666666667vh;
  animation-delay: 8.533333.........完整代码请登录后点击上方下载按钮下载查看