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

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

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