css实现多彩方形旋转组成三角形立体效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现多彩方形旋转组成三角形立体效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  background-color: #0F0F0F;
}

.tri {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 50px;
  height: 50px;
}
.tri .side {
  width: 50px;
  height: 50px;
  position: absolute;
  transform-origin: center center;
}
.tri .side:nth-child(1) {
  transform: translateX(-100px);
}
.tri .side:nth-child(2) {
  transform: translateX(0px);
}
.tri .side:nth-child(3) {
  transform: translateX(100px);
}
.tri .side:nth-child(2) {
  transform: translateY(-150px);
}
.tri .ring {
  width: 50px;
  height: 50px;
  position: absolute;
  background: white;
  -webkit-animation-name: rotate, cromatic;
          animation-name: rotate, cromatic;
  -webkit-animation-duration: 3s, 3s;
          animation-duration: 3s, 3s;
  -webkit-animation-timing-function: linear, linear;
          animation-timing-function: linear, linear;
  -webkit-animation-iteration-count: infinite, infinite;
          animation-iteration-count: infinite, infinite;
  opacity: 0.5;
  box-shadow: 0 0 30px black;
  border-radius: 20%;
}

.side:nth-child(1) .ring:nth-child(0) {
  margin: 0 0 0 0px;
  z-index: 0;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.side:nth-child(1) .ring:nth-child(1) {
  margin: 0 0 0 6.6666666667px;
  z-index: 1;
  -webkit-animation-delay: 0.0333333333s;
          animation-delay: 0.0333333333s;
}

.side:nth-child(1) .ring:nth-child(2) {
  margin: 0 0 0 13.3333333333px;
  z-index: 2;
  -webkit-animation-delay: 0.0666666667s;
          animation-delay: 0.0666666667s;
}

.side:nth-child(1) .ring:nth-child(3) {
  margin: 0 0 0 20px;
  z-index: 3;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.side:nth-child(1) .ring:nth-child(4) {
  margin: 0 0 0 26.6666666667px;
  z-index: 4;
  -webkit-animation-delay: 0.1333333333s;
          animation-delay: 0.1333333333s;
}

.side:nth-child(1) .ring:nth-child(5) {
  margin: 0 0 0 33.3333333333px;
  z-index: 5;
  -webkit-animation-delay: 0.1666666667s;
          animation-delay: 0.1666666667s;
}

.side:nth-child(1) .ring:nth-child(6) {
  margin: 0 0 0 40px;
  z-index: 6;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.side:nth-child(1) .ring:nth-child(7) {
  margin: 0 0 0 46.6666666667px;
  z-index: 7;
  -webkit-animation-delay: 0.2333333333s;
          animation-delay: 0.2333333333s;
}

.side:nth-child(1) .ring:nth-child(8) {
  margin: 0 0 0 53.3333333333px;
  z-index: 8;
  -webkit-animation-delay: 0.2666666667s;
          animation-delay: 0.2666666667s;
}

.side:nth-child(1) .ring:nth-child(9) {
  margin: 0 0 0 60px;
  z-index: 9;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

.side:nth-child(1) .ring:nth-child(10) {
  margin: 0 0 0 66.6666666667px;
  z-index: 10;
  -webkit-animation-delay: 0.3333333333s;
          animation-delay: 0.3333333333s;
}

.side:nth-child(1) .ring:nth-child(11) {
  margin: 0 0 0 73.3333333333px;
  z-index: 11;
  -webkit-animation-delay: 0.3666666667s;
          animation-delay: 0.3666666667s;
}

.side:nth-child(1) .ring:nth-child(12) {
  margin: 0 0 0 80px;
  z-index: 12;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.side:nth-child(1) .ring:nth-child(13) {
  margin: 0 0 0 86.6666666667px;
  z-index: 13;
  -webkit-animation-delay: 0.4333333333s;
          animation-delay: 0.4333333333s;
}

.side:nth-child(1) .ring:nth-child(14) {
  margin: 0 0 0 93.3333333333px;
  z-index: 14;
  -webkit-animation-delay: 0.4666666667s;
          animation-delay: 0.4666666667s;
}

.side:nth-child(1) .ring:nth-child(15) {
  margin: 0 0 0 100px;
  z-index: 15;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.side:nth-child(1) .ring:nth-child(16) {
  margin: 0 0 0 106.6666666667px;
  z-index: 16;
  -webkit-animation-delay: 0.5333333333s;
          animation-delay: 0.5333333333s;
}

.side:nth-child(1) .ring:nth-child(17) {
  margin: 0 0 0 113.3333333333px;
  z-index: 17;
  -webkit-animation-delay: 0.5666666667s;
          animation-delay: 0.5666666667s;
}

.side:nth-child(1) .ring:nth-child(18) {
  margin: 0 0 0 120px;
  z-index: 18;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.side:nth-child(1) .ring:nth-child(19) {
  margin: 0 0 0 126.6666666667px;
  z-index: 19;
  -webkit-animation-delay: 0.6333333333s;
          animation-delay: 0.6333333333s;
}

.side:nth-child(1) .ring:nth-child(20) {
  margin: 0 0 0 133.3333333333px;
  z-index: 20;
  -webkit-animation-delay: 0.6666666667s;
          animation-delay: 0.6666666667s;
}

.side:nth-child(1) .ring:nth-child(21) {
  margin: 0 0 0 140px;
  z-index: 21;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.side:nth-child(1) .ring:nth-child(22) {
  margin: 0 0 0 146.6666666667px;
  z-index: 22;
  -webkit-animation-delay: 0.7333333333s;
          animation-delay: 0.7333333333s;
}

.side:nth-child(1) .ring:nth-child(23) {
  margin: 0 0 0 153.3333333333px;
  z-index: 23;
  -webkit-animation-delay: 0.7666666667s;
          animation-delay: 0.7666666667s;
}

.side:nth-child(1) .ring:nth-child(24) {
  margin: 0 0 0 160px;
  z-index: 24;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.side:nth-child(1) .ring:nth-child(25) {
  margin: 0 0 0 166.6666666667px;
  z-index: 25;
  -webkit-animation-delay: 0.8333333333s;
          animation-delay: 0.8333333333s;
}

.side:nth-child(1) .ring:nth-child(26) {
  margin: 0 0 0 173.3333333333px;
  z-index: 26;
  -webkit-animation-delay: 0.8666666667s;
          animation-delay: 0.8666666667s;
}

.side:nth-child(1) .ring:nth-child(27) {
  margin: 0 0 0 180px;
  z-index: 27;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.side:nth-child(1) .ring:nth-child(28) {
  margin: 0 0 0 186.6666666667px;
  z-index: 28;
  -webkit-animation-delay: 0.9333333333s;
          animation-delay: 0.9333333333s;
}

.side:nth-child(1) .ring:nth-child(29) {
  margin: 0 0 0 193.3333333333px;
  z-index: 29;
  -webkit-animation-delay: 0.9666666667s;
          animation-delay: 0.9666666667s;
}

.side:nth-child(1) .ring:nth-child(30) {
  margin: 0 0 0 200px;
  z-index: 30;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.side:nth-child(2) .ring:nth-child(0) {
  margin: 0px 0 0 0px;
  z-index: 30;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.side:nth-child(2) .ring:nth-child(1) {
  margin: 5px 0 0 -3.3333333333px;
  z-index: 29;
  -webkit-animation-delay: 2.0333333333s;
          animation-delay: 2.0333333333s;
}

.side:nth-child(2) .ring:nth-child(2) {
  margin: 10px 0 0 -6.6666666667px;
  z-index: 28;
  -webkit-animation-delay: 2.0666666667s;
          animation-delay: 2.0666666667s;
}

.side:nth-child(2) .ring:nth-child(3) {
  margin: 15px 0 0 -10px;
  z-index: 27;
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

.side:nth-child(2) .ring:nth-child(4) {
  margin: 20px 0 0 -13.3333333333px;
  z-index: 26;
  -webkit-animation-delay: 2.1333333333s;
          animation-delay: 2.1333333333s;
}

.side:nth-child(2) .ring:nth-child(5) {
  margin: 25px 0 0 -16.6666666667px;
  z-index: 25;
  -webkit-animation-delay: 2.1666666667s;
          animation-delay: 2.1666666667s;
}

.side:nth-child(2) .ring:nth-child(6) {
  margin: 30px 0 0 -20px;
  z-index: 24;
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

.side:nth-child(2) .ring:nth-child(7) {
  margin: 35px 0 0 -23.3333333333px;
  z-index: 23;
  -webkit-animation-delay: 2.2333333333s;
          animation-delay: 2.2333333333s;
}

.side:nth-child(2) .ring:nth-child(8) {
  margin: 40px 0 0 -26.6666666667px;
  z-index: 22;
  -webkit-animation-delay: 2.2666666667s;
          animation-delay: 2.2666666667s;
}

.side:nth-child(2) .ring:nth-child(9) {
  margin: 45px 0 0 -30px;
  z-index: 21;
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

.side:nth-child(2) .ring:nth-child(10) {
  margin: 50px 0 0 -33.3333333333px;
  z-index: 20;
  -webkit-animation-delay: 2.3333333333s;
          animation-delay: 2.3333333333s;
}

.side:nth-child(2) .ring:nth-child(11) {
  margin: 55px 0 0 -36.6666666667px;
  z-index: 19;
  -webkit-animation-delay: 2.3666666667s;
          animation-delay: 2.3666666667s;
}

.side:nth-child(2) .ring:nth-child(12) {
  margin: 60px 0 0 -40px;
  z-index: 18;
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

.side:nth-child(2) .ring:nth-child(13) {
  margin: 65px 0 0 -43.3333333333px;
  z-index: 17;
  -webkit-animation-delay: 2.4333333333s;
          animation-delay: 2.4333333333s;
}

.side:nth-child(2) .ring:nth-child(14) {
  margin: 70px 0 0 -46.6666666667px;
  z-index: 16;
  -webkit-animation-delay: 2.4666666667s;
          animation-delay: 2.4666666667s;
}

.side:nth-child(2) .ring:nth-child(15) {
  margin: 75px 0 0 -50px;
  z-index: 15;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.side:nth-child(2) .ring:nth-child(16) {
  margin: 80px 0 0 -53.3333333333px;
  z-index: 14;
  -webkit-animation-delay: 2.5333333333s;
          animation-delay: 2.5333333333s;
}

.side:nth-child(2) .ring:nth-child(17) {
  margin: 85px 0 0 -56.6666666667px;
  z-index: 13;
  -webkit-animation-delay: 2.5666666667s;
          animation-delay: 2.5666666667s;
}

.side:nth-child(2) .ring:nth-child(18) {
  margin: 90px 0 0 -60px;
  z-index: 12;
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}

.side:nth-child(2) .ring:nth-child(19) {
  margin: 95px 0 0 -63.3333333333px;
  z-index: 11;
  -webkit-animation-delay: 2.6333333333s;
          animation-delay: 2.6333333333s;
}

.side:nth-child(2) .ring:nth-child(20) {
  margin: 100px 0 0 -66.6666666667px;
  z-index: 10;
  -webkit-animation-delay: 2.6666666667s;
          animation-delay: 2.6666666667s;
}

.side:nth-child(2) .ring:nth-child(21) {
  margin: 105px 0 0 -70px;
  z-index: 9;
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
}

.side:nth-child(2) .ring:nth-child(22) {
  margin: 110px 0 0 -73.3333333333px;
  z-index: 8;
  -webkit-animation-delay: 2.7333333333s;
          animation-delay: 2.7333333333s;
}

.side:nth-child(2) .ring:nth-child(23) {
  margin: 115px 0 0 -76.6666666667px;
  z-index: 7;
  -webkit-animation-delay: 2.7666666667s;
          animation-delay: 2.7666666667s;
}

.side:nth-child(2) .ring:nth-child(24) {
  margin: 120px 0 0 -80px;
  z-index: 6;
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

.side:nth-child(2) .ring:nth-child(25) {
  margin: 125px 0 0 -83.3333333333px;
  z-index: 5;
  -webkit-animation-delay: 2.8333333333s;
          animation-delay: 2.8333333333s;
}

.side:nth-child(2) .ring:nth-child(26) {
  margin: 130px 0 0 -86.6666666667px;
  z-index: 4;
  -webkit-animation-delay: 2.8666666667s;
          animation-delay: 2.8666666667s;
}

.side:nth-child(2) .ring:nth-child(27) {
  margin: 135px 0 0 -90px;
  z-index: 3;
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}

.side:nth-child(2) .ring:nth-child(28) {
  margin: 140px 0 0 -93.3333333333px;
  z-index: 2;
  -webkit-animation-delay: 2.9333333333s;
          animation-delay: 2.9333333333s.........完整代码请登录后点击上方下载按钮下载查看