css实现假3d三维效果-html代码-BFW代码库

代码语言：html

所属分类：三维

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #3D5467;
}

.ellipse {
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.e1 {
  width: calc(90vh - 90vh / 50 * 1);
  height: calc(90vh / 50 * 1);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e2 {
  width: calc(90vh - 90vh / 50 * 2);
  height: calc(90vh / 50 * 2);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e3 {
  width: calc(90vh - 90vh / 50 * 3);
  height: calc(90vh / 50 * 3);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e4 {
  width: calc(90vh - 90vh / 50 * 4);
  height: calc(90vh / 50 * 4);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e5 {
  width: calc(90vh - 90vh / 50 * 5);
  height: calc(90vh / 50 * 5);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e6 {
  width: calc(90vh - 90vh / 50 * 6);
  height: calc(90vh / 50 * 6);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e7 {
  width: calc(90vh - 90vh / 50 * 7);
  height: calc(90vh / 50 * 7);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e8 {
  width: calc(90vh - 90vh / 50 * 8);
  height: calc(90vh / 50 * 8);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e9 {
  width: calc(90vh - 90vh / 50 * 9);
  height: calc(90vh / 50 * 9);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e10 {
  width: calc(90vh - 90vh / 50 * 10);
  height: calc(90vh / 50 * 10);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e11 {
  width: calc(90vh - 90vh / 50 * 11);
  height: calc(90vh / 50 * 11);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e12 {
  width: calc(90vh - 90vh / 50 * 12);
  height: calc(90vh / 50 * 12);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e13 {
  width: calc(90vh - 90vh / 50 * 13);
  height: calc(90vh / 50 * 13);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e14 {
  width: calc(90vh - 90vh / 50 * 14);
  height: calc(90vh / 50 * 14);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e15 {
  width: calc(90vh - 90vh / 50 * 15);
  height: calc(90vh / 50 * 15);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e16 {
  width: calc(90vh - 90vh / 50 * 16);
  height: calc(90vh / 50 * 16);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e17 {
  width: calc(90vh - 90vh / 50 * 17);
  height: calc(90vh / 50 * 17);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e18 {
  width: calc(90vh - 90vh / 50 * 18);
  height: calc(90vh / 50 * 18);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e19 {
  width: calc(90vh - 90vh / 50 * 19);
  height: calc(90vh / 50 * 19);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e20 {
  width: calc(90vh - 90vh / 50 * 20);
  height: calc(90vh / 50 * 20);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e21 {
  width: calc(90vh - 90vh / 50 * 21);
  height: calc(90vh / 50 * 21);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e22 {
  width: calc(90vh - 90vh / 50 * 22);
  height: calc(90vh / 50 * 22);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e23 {
  width: calc(90vh - 90vh / 50 * 23);
  height: calc(90vh / 50 * 23);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e24 {
  width: calc(90vh - 90vh / 50 * 24);
  height: calc(90vh / 50 * 24);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e25 {
  width: calc(90vh - 90vh / 50 * 25);
  height: calc(90vh / 50 * 25);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e26 {
  width: calc(90vh - 90vh / 50 * 26);
  height: calc(90vh / 50 * 26);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e27 {
  width: calc(90vh - 90vh / 50 * 27);
  height: calc(90vh / 50 * 27);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e28 {
  width: calc(90vh - 90vh / 50 * 28);
  height: calc(90vh / 50 * 28);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e29 {
  width: calc(90vh - 90vh / 50 * 29);
  height: calc(90vh / 50 * 29);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e30 {
  width: calc(90vh - 90vh / 50 * 30);
  height: calc(90vh / 50 * 30);
  background: #DB5461;
  animation: 1s linear sideToSide infinite alternate;
}

.e31 {
  width: calc(90vh - 90vh / 50 * 31);
  height: calc(90vh / 50 * 31);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e32 {
  width: calc(90vh - 90vh / 50 * 32);
  height: calc(90vh / 50 * 32);
  background: #8AA29E;
  animation: 1s linear sideToSide infinite alternate;
}

.e33 {
  width: calc(90vh - 90vh / 50 * 33);
  height: calc(90vh / 50 * 33);
  background: #F1EDEE;
  animation: 1s linear sideToSide infinite alternate;
}

.e34 {
  width: calc(90vh - 90vh / 50 * 34.........完整代码请登录后点击上方下载按钮下载查看