div+css实现一个3D道路围栏升起落下动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现一个3D道路围栏升起落下动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
<style>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  align-items: center;
  background: linear-gradient(33deg, #323b42, #121317);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

main {
  --unit: 0.2em;
  --error-color: red;
  --error-color-dark: #721e1e;
}

.fence {
  -webkit-animation: fenceAnimation 10s infinite ease-out;
          animation: fenceAnimation 10s infinite ease-out;
  height: calc(100 * var(--unit));
  perspective: calc(250 * var(--unit));
  perspective-origin: 50% 50%;
  position: relative;
  width: calc(100 * var(--unit));
}
.fence__container {
  -webkit-animation: fenceAnimation 10s infinite ease-out;
          animation: fenceAnimation 10s infinite ease-out;
  height: inherit;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotate3d(1, -0.3, 0, -10deg);
  transform-style: preserve-3d;
  width: inherit;
}
.fence__container > * {
  left: 0;
  position: absolute;
  top: 50%;
  transform-style: preserve-3d;
}

.base {
  left: calc(11.43 * var(--unit));
  transform: translate3D(-50%, calc(34.28 * var(--unit)), 0);
}
.base .side--top {
  filter: brightness(1);
}
.base .side--bottom {
  filter: brightness(0);
}
.base .side--right, .base .side--left {
  filter: brightness(0.6);
}
.base .side--front, .base .side--back {
  filter: brightness(0.7);
}

.light {
  -webkit-animation: lightContainer infinite 5s ease-in-out;
          animation: lightContainer infinite 5s ease-in-out;
  left: calc(11.43 * var(--unit));
  transform: translate3D(-50%, calc(-4.29 * var(--unit)), 0);
}
.light::before {
  -webkit-animation: lightShadow 5s ease infinite;
          animation: lightShadow 5s ease infinite;
  content: "";
  height: 0;
  position: absolute;
  width: 0;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  box-shadow: 0 0 calc(9.43 * var(--unit)) calc(5.71 * var(--unit)) red, 0 0 calc(1 * var(--unit)) calc(2 * var(--unit)) red;
  transform-style: unset;
}
.light-rotation {
  all: inherit;
  -webkit-animation: lightrotation infinite 5s linear;
          animation: lightrotation infinite 5s linear;
  left: 0;
  position: relative;
}
.light .side {
  background: red;
  filter: blur(1px);
}

.pole {
  left: calc(11.43 * var(--unit));
  transform: translate3D(-50%, 0, 0);
}
.pole .side {
  background: var(--error-color-dark);
  border: calc(1 * var(--unit)) solid #fff;
}
.pole .side--top {
  border: none;
  background: radial-gradient(#d72323, #ff8a8a 80%);
  filter: brightness(1);
}
.pole .side--bottom {
  filter: brightness(0);
}
.pole .side--right, .pole .side--left {
  filter: brightness(0.7);
}
.pole .side--front, .pole .side--back {
  filter: brightness(0.9);
}

.bar {
  -webkit-animation: fallingBar 10s infinite ease-out;
          animation: fallingBar 10s infinite ease-out;
  transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-20deg);
  transform-origin: calc(11.43 * var(--unit)) 0;
}
.bar .side--front, .bar .side--back {
  background-image: repeating-linear-gradient(45deg, transparent, transparent calc(5.71 * var(--unit)), #ffffff calc(5.71 * var(--unit)), #ffffff calc(11.42 * var(--unit)));
  background-color: var(--error-color);
}
.bar .side--left {
  background-color: var(--error-color);
}
.bar .side--top {
  filter: brightness(0.95);
}
.bar .side--bottom {
  filter: brightness(0.7);
}

.cube {
  height: calc(var(--cube-height) * var(--unit));
  position: relative;
  transform-style: preserve-3d;
  width: calc(var(--cube-width) * var(--unit));
}

.side {
  background: #fff;
  box-sizing: border-box;
  height: inherit;
  position: absolute;
  width: inherit;
}
.side--front {
  transform: translateZ(calc((var(--cube-depth) / 2) * var(--unit)));
}
.side--back {
  transform: translateZ(calc((var(--cube-depth) / 2) * var(--unit) * -1));
}
.side--right {
  transform: rotateY(90deg) translateZ(calc((var(--cube-width) / 2) * var(--unit))) scaleX(calc(var(--cube-depth) / var(--cube-width)));
}
.side--left {
  transform: rotateY(-90deg) translateZ(calc((var(--cube-width) / 2) * var(--unit))) scaleX(calc(var(--cube-depth) / var(--cube-width)));
}
.side--top {
  transform: rotateX(90deg) translateZ(calc((var(--cube-height) / 2) * var(--unit))) scaleY(calc(var(--cube-depth) / var(--cube-height)));
}
.side--bottom {
  transform: rotateX(-90deg) translateZ(calc((var(--cube-height) / 2) * var(--unit))) scaleY(calc(var(--cube-depth) / var(--cube-height)));
}

@-webkit-keyframes fenceAnimation {
  0%, 60%, 100% {
    perspective: calc(500 * var(--unit));
    perspective-origin: 0 0;
    transform: scale(1);
  }
  45%, 50% {
    perspective: calc(150 * var(--unit));
    perspective-origin: 50% 50%;
    transform: scale(1.01);
  }
}

@keyframes fenceAnimation {
  0%, 60%, 100% {
    perspective: calc(500 * var(--unit));
    perspective-origin: 0 0;
    transform: scale(1);
  }
  45%, 50% {
    perspective: calc(150 * var(--unit));
    perspective-origin: 50% 50%;
    transform: scale(1.01);
  }
}
@-webkit-keyframes lightContainer {
  0%, 100% {
    transform: translate3D(-50%, calc(-4.29 * var(--unit)), 0);
  }
  50% {
    transform: translate3D(-50%, calc(-5.71 * var(--unit)), 0);
  }
}
@keyframes lightContainer {
  0%, 100% {
    transform: translate3D(-50%, calc(-4.29 * var(--unit)), 0);
  }
  50% {
    transform: translate3D(-50%, calc(-5.71 * var(--unit)), 0);
  }
}
@-webkit-keyframes lightShadow {
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: scaleX(1);
  }
  0%, 25%, 50%, 75%, 100% {
    transform: scaleX(0.95);
  }
}
@keyframes lightShadow {
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: scaleX(1);
  }
  0%, 25%, 50%, 75%, 100% {
    transform: scaleX(0.95);
  }
}
@-webkit-keyframes lightrotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1turn);
  }
}
@keyframes lightrotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1turn);
  }
}
@-webkit-keyframes fallingBar {
  0%, 90%, 100% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(0deg);
  }
  45%, 50% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-20deg);
  }
  50.2% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-19.95deg);
  }
  50.3% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-19.8deg);
  }
  50.5% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-19.56deg);
  }
  50.6% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-19.22deg);
  }
  50.8% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-18.77deg);
  }
  51.0% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-18.23deg);
  }
  51.1% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-17.6deg);
  }
  51.3% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-16.86deg);
  }
  51.5% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-16.03deg);
  }
  51.6% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-15.09deg);
  }
  51.8% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-14.06deg);
  }
  51.9% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-12.94deg);
  }
  52.1% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-11.71deg);
  }
  52.3% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-10.39deg);
  }
  52.4% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-8.964deg);
  }
  52.6% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-7.443deg);
  }
  52.7% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-5.825deg);
  }
  52.9% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-4.108deg);
  }
  53.1% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-2.293deg);
  }
  53.2% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-0.38deg);
  }
  53.3% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(0deg);
  }
  53.4% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(0deg);
  }
  53.6% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-1.139deg);
  }
  53.7% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-2.181deg);
  }
  53.9% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-3.124deg);
  }
  54.1% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-3.969deg);
  }
  54.2% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-4.716deg);
  }
  54.4% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-5.365deg);
  }
  54.5% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-5.916deg);
  }
  54.7% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-6.369deg);
  }
  54.9% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-6.724deg);
  }
  55.0% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-6.98deg);
  }
  55.2% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-7.139deg);
  }
  55.4% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-7.199deg);
  }
  55.5% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-7.162deg);
  }
  55.7% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-7.026deg);
  }
  55.8% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-6.792deg);
  }
  56.0% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-6.46deg);
  }
  56.2% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-6.03deg);
  }
  56.3% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-5.502deg);
  }
  56.5% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-4.875deg);
  }
  56.6% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-4.151deg);
  }
  56.8% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-3.328deg);
  }
  57.0% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-2.408deg);
  }
  57.1% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-1.389deg);
  }
  57.3% {
    transform: translate3D(0, calc(4.29 * var(--unit)), 0) rotateZ(-0.2723.........完整代码请登录后点击上方下载按钮下载查看