div+css布局绘制城市马路立交桥高架效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局绘制城市马路立交桥高架效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #04011E;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.c-road-block {
  margin: 0 auto;
  text-align: center;
  transform: skew(10deg);
}

.c-road {
  display: inline-block;
  width: 150px;
  height: 100vh;
  margin: 0 20px;
  background-color: #50324C;
  border-left: 10px solid #E4976B;
  border-right: 10px solid #E4976B;
  position: relative;
}
.c-road:after, .c-road:before {
  content: "";
  width: 2px;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(to right, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 90px 3px, 90px 3px, 3px 90px, 3px 90px;
}
.c-road--long {
  width: 300px;
  background: #61374d;
  background: linear-gradient(to right, #61374d 0%, #4f2b42 20%, #61374d 39%, #4f2b42 53%, #61374d 67%, #4f2b42 83%, #61374d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#61374d", endColorstr="#61374d",GradientType=1 );
}
.c-road--long:after {
  left: 30%;
}
.c-road--long:before {
  left: 65%;
}

.c-piece {
  position: absolute;
  top: 10%;
  z-index: -1;
  height: 100px;
  left: -50%;
  transform: rotate(-10deg);
  background: Red;
  width: 100%;
  display: flex;
  background: #e9eb88;
  background: linear-gradient(to bottom, #e9eb88 23%, #cace70 25%, #cace70 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#e9eb88", endColorstr="#cace70",GradientType=0 );
}
.c-piece:after {
  content: "";
  width: 100%;
  left: 0;
  bottom: 20%;
  height: 2px;
  background: white;
  position: absolute;
  opacity: 0.5;
}
.c-piece span:nth-child(1) {
  width: 3.5%;
  height: 100%;
  background: #201636;
  background: linear-gradient(to bottom, #201636 23%, #190e36 25%, #190e36 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#201636", endColorstr="#190e36",GradientType=0 );
  position: absolute;
  left: 55%;
}

.c-long-road {
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  transform: translateY(-50%) rotate(-10deg);
  height: 150px;
  background: #6e414e;
  background: linear-gradient(to bottom, #6e414e 0%, #442537 22%, #6e414e 38%, #442537 53%, #6e414e 68%, #442537 83%, #6e414e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#6e414e", endColorstr="#6e414e",GradientType=0 );
  border-top: 3px solid #E4976B;
  border-bottom: 3px solid #E4976B;
}
.c-long-road:after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(to right, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #D7A270 0%, #D7A270 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 90px 3px, 90px 3px, 3px 90px, 3px 90px;
}

.line {
  height: 170px;
  width: 3px;
  background: rgba(194, 158, 149, 0.8);
  position: absolute;
  left: 17%;
  top: -12px;
}
.line:after, .line:before {
  width: 35px;
  height: 35px;
  content: "";
  top: -26px;
  left: -16px;
  z-index: -1;
  position: absolute;
  background: #3E2D55;
}
.line:before {
  top: unset;
  bottom: -18px;
  background: #644062;
  height: 29px;
}
.line--long {
  left: 85%;
}

.c-side-road {
  width: 150px;
  height: 100%;
  left: -120px;
  z-index: -1;
  top: 0;
  border-right: 3px solid #63A7B7;
  position: absolute;
  transform: skew(12deg);
  background: #375368;
  background: linear-gradient(to right, #375368 0%, #2a3958 23%, #375368 38%, #2a3958 52%, #375368 68%, #2a3958 83%, #375368 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#375368", endColorstr="#375368",GradientType=1 );
}
.c-side-road:after {
  content: "";
  width: 3px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(to right, #6D97B0 0%, #6D97B0 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to right, #6D97B0 0%, #6D97B0 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #6D97B0 0%, #6D97B0 50%, transparent 50%, transparent 100%), repeating-linear-gradient(to bottom, #6D97B0 0%, #6D97B0 50%, transparent 50%, transparent 100%);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 90px 3px, 90px 3px, 3px 90px, 3px 90px;
}

.lights {
  width: 25px;
  hei.........完整代码请登录后点击上方下载按钮下载查看