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

css实现假3d三维效果

代码语言：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;
.........完整代码请登录后点击上方下载按钮下载查看