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

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

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