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