css布局实现一个城市夜景效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现一个城市夜景效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
<style>
html {
  height: 100%;
}
body {
  background: linear-gradient(to bottom, #002855,40%,#560bad);
}
.reflect-line {
  position: absolute;
  width: 100%;
  height: 5px;
  left: 0px;
  bottom: 150px;
  background: linear-gradient(
    to right,
    #168aad,
    #4cc9f0,
    #ffd166,
    #f8961e,
    #f3722c,
    #f72585,
    #560bad,
    #168aad
  );
  z-index: 2;
}
.b-1 {
  position: absolute;
  height: 190px;
  width: 60px;
  top: 349px;
  left: -10px;
  background: linear-gradient(to top, #168aad, 40%, #001845);
  box-shadow: 0px -5px 0px #4ecdc4;
  -webkit-box-reflect: below 3px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
  z-index: 1;
}
.w-1 {
  position: absolute;
  height: 5px;
  width: 15px;
  top: 10px;
  left: 15px;
  background: #4ecdc4;
  box-shadow: 22px 0px 0px #4ecdc4, 0px 12px 0px #4ecdc4, 0px 24px 0px #4ecdc4,
    22px 24px 0px #4ecdc4, 22px 36px 0px #4ecdc4, 0px 36px 0px #4ecdc4,
    22px 48px 0px #4ecdc4, 22px 60px 0px #4ecdc4, 0px 72px 0px #4ecdc4,
    22px 72px 0px #4ecdc4, 22px 84px 0px #4ecdc4, 0px 84px 0px #4ecdc4,
    22px 96px 0px #4ecdc4, 0px 96px 0px #4ecdc4, 22px 108px 0px #4ecdc4,
    0px 108px 0px #4ecdc4, 22px 120px 0px #4ecdc4, 22px 132px 0px #4ecdc4,
    22px 144px 0px #4ecdc4, 0px 144px 0px #4ecdc4, 22px 156px 0px #4ecdc4,
    0px 156px 0px #4ecdc4, 22px 168px 0px #4ecdc4, 0px 168px 0px #4ecdc4;
  z-index: 1;
}
.b-2 {
  position: absolute;
  height: 300px;
  width: 90px;
  top: 237px;
  left: 30px;
  background: #001845;
  border: 2px #ffe66d solid;
  -webkit-box-reflect: below 0px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
  z-index: 0;
}
.l-1 {
  position: absolute;
  height: 300px;
  width: 3px;
  background: linear-gradient(to top, #4cc9f0, #f72585);
  left: 5px;
}
.l-2 {
  position: absolute;
  height: 300px;
  width: 3px;
  background: linear-gradient(to top, #4cc9f0, #f72585);
  left: 15px;
}
.l-3 {
  position: absolute;
  height: 300px;
  width: 3px;
  background: #ffe66d;
  left: 25px;
}
.l-4 {
  position: absolute;
  height: 300px;
  width: 3px;
  background: linear-gradient(to top, #4cc9f0, #f72585);
  left: 35px;
}
.l-5 {
  position: absolute;
  height: 300px;
  width: 3px;
  background: linear-gradient(to top, #4cc9f0, #f72585);
  left: 45px;
}
.l-6 {
  position: absolute;
  height: 300px;
  width: 3px;
  background: linear-gradient(to top, #4cc9f0, #f72585);
  left: 55px;
}
.l-7 {
  position: absolute;
  height: 300px;
  width: 3px;
  background: linear-gradient(to top, #4cc9f0, #f72585);
  left: 65px;
}
.l-8 {
  position: absolute;
  height: 300px;
  width: 3px;
  background: linear-gradient(to top, #4cc9f0, #f72585);
  left: 75px;
}
.l-9 {
  position: absolute;
  height: 300px;
  width: 3px;
  background: linear-gradient(to top, #4cc9f0, #f72585);
  left: 85px;
}
.floor {
  position: absolute;
  height: 3px;
  width: 90px;
  background: #ffe66d;
  top: 60px;
  left: 0px;
  box-shadow: 0px 60px 0px #ffe66d,
0px 120px 0px #ffe66d,
0px 180px 0px #ffe66d;
}
.floor::before{
  content: "";
  position: absolute;
  height: 3px;
  width: 35px;
  top: 20px;
  left: 10px;
  background: #ffe66d;
  box-shadow: 15px 15px 0px #ffe66d,
0px 125px 0px #ffe66d,
15px 145px 0px #ffe66d;
}
.floor::after{
  content: "";
  position: absolute;
  height: 3px;
  width: 25px;
  top: -20px;
  right: 10px;
  background: #ffe66d;
  box-shadow: -25px -25px #ffe66d,
-15px 105px #ffe66d;
}
.b-3 {
  position: absolute;
  height: 100px;
  width: 170px;
  top: 438px;
  left: 211px;
  background: linear-gradient(to top, #168aad, 40%, #001845);
  border: 4px #fff3b0 solid;
  border-color: #fff3b0 transparent transparent transparent;
  -webkit-box-reflect: below -10px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}
.blc-1 {
  position: absolute;
  height: 121px;
  width: 70px;
  background: linear-gradient(to top, #168aad, 40%, #001845);
  top: -20px;
  left: -70px;
  box-shadow: 0px -4px 0px #ffe66d;
  -webkit-box-reflect: below -5px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}
.blc-1::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 125px;
  top: -4px;
  left: -20px;
  background: linear-gradient(to bottom,#fff3b0,#72efdd);
  -webkit-box-reflect: below -5px linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9));
}
.blc-1::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 5px;
  top: -4px;
  background: #fff3b0;
  -webkit-box-reflect: below 235px
    linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
}
.blc-2 {
  position: absolute;
  height: 120px;
  width: 70px;
  background: linear-gradient(to top, #168aad, 40%, #001845);
  top: -20px;
  right: -70px;
  box-shadow: 0px -4px 0px #ffe66d;
  -webkit-box-reflect: below -5px linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}
.blc-2::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 5px;
  top: -4px;
  background: #fff3b0;
  -webkit-box-reflect: below 232px
    linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
}
.line-center {
  position: absolute;
  height: 100px;
  width: 15px;
  background: #001845;
  right: 45%;
}
.line-left {
  position: absolute;
  height: 120px;
  width: 15px;
  background: #001845;
  right: 40%;
}
.line-right {
  position: absolute;
  height: 120px;
  width: 15px;
  background: #001845;
  right: 40%;
}
.w-3 {
  position: absolute;
  height: 5px;
  width: 10px;
  top: 10px;
  left: 5px;
  background: #ffd60a;
  box-shadow: 15px 0px 0px #ffd60a, 15px 0px 0px #ffd60a, 30px 0px 0px #ffd60a,
    60px 0px 0px #ffd60a, 30px 15px 0px #ffd60a, 15px 15px 0px #ffd60a,
    60px 15px 0px #ffd60a, 0px 30px 0px #ffd60a, 15px 30px 0px #ffd60a,
    30px 30px 0px #ffd60a,
60px 30px 0px #ffd60a,
60px 60px 0px #ffd60a,
60px 70px 0px #ffd60a,
60px 75px 0px #ffd60a,
60px 80px 0px #ffd60a,
60px 82px 0px #ffd60a,
30px 60px 0px #ffd60a,
30px 75px 0px #ffd60a,
15px 60px 0px #ffd60a,
15px 75px 0px #ffd60a,
0px 60px 0px #ffd60a,
0px 75px 0px #ffd60a,
0px 45px 0px #ffd60a,
95px 0px 0px #ffd60a,
95px 15px 0px #ffd60a,
95px 45px 0px #ffd60a,
95px 60px 0px #ffd60a,95px 75px 0px #ffd60a,
110px 15px 0px #ffd60a,
110px 0px 0px #ffd60a,
110px 45px 0px #ffd60a,
110px 60px 0px #ffd60a,
110px 75px 0px #ffd60a,
125px 0px 0px #ffd60a,
125px 15px 0px #ffd60a,
125px 45px 0px #ffd60a,
125px 75px 0px #ffd60a,
140px 0px 0px #ffd60a,
140px 15px 0px #ffd60a,
140px 30px 0px #ffd60a,
140px 45px 0px #ffd60a,
140px 60px 0px #ffd60a,
140px 75px 0px #ffd60a,
95px 70px 0px #ffd60a,
95px 75px 0px #ffd60a,
95px 80px 0px #ffd60a,
95px 82px 0px #ffd60a;
}
.wblc1{
  position: absolute;
  height: 5px;
  width: 10px;
  top: 13px;
  left: 9px;
  background: #ffd60a;
  box-shadow: 0px 15px 0px #ffd60a,
0px 30px 0px #ffd60a,
0px 45px 0px #ffd60a,
0px 75px 0px #ffd60a,
0px 87px 0px #ffd60a,
0px 92px 0px #ffd60a,
0px 97px 0px #ffd60a,
0px 99px 0px #ffd60a,
42px 0px 0px #ffd60a,
42px 60px 0px #ffd60a,
42px 30px 0px #ffd60a,
42px 45px 0px #ffd60a,
42px 75px 0px #ffd60a,
42px 87px 0px #ffd60a,
42px 92px 0px #ffd60a,
42px 97px 0px #ffd60a,
42px 99px 0px #ffd60a
;
}
.wblc2{
  position: absolute;
  height: 5px;
  width: 10px;
  top: 13px;
  left: 9px;
  background: #ffd60a;
  box-shadow: 0px 60px 0px #ffd60a,
0px 30px 0px #ffd60a,
0px 45px 0px #ffd60a,
0px 75px 0px #ffd60a,
0px 87px 0px #ffd60a,
0px 92px 0px #ffd60a,
0px 97px 0px #ffd60a,
0px 99px 0px #ffd60a,
42px 15px 0px #ffd60a,
42px 60px 0px #ffd60a,
42px 30px 0px #ffd60a,
42px 45px 0px #ffd60a,
42px 75px 0px #ffd60a,
42px 87px 0px #ffd60a,
42px 92px 0px #ffd60a,
42px 97px 0px #ffd60a,
42px 99px 0px #ffd60a;
}
.b-4{
  position: absolute;
  height: 220px;
  width: 90px;
  top: 319px;
  left: 481px;
  background: linear-gradient(to bottom,#240046,1%,#3c096c,75%,#ff4d6d);
-webkit-box-reflect: below 0px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}
.line-4{
  position: absolute;
  width: 4px;
  height: 200px;
  background: linear-gradient(to bottom,#001845,#3c096c,#c9184a);
  top: 20px;
  left: -14px;
  -webkit-box-reflect: below 0px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}
.b-4::before{
  content: "";
  position: absolute;
  height: 220px;
  width: 25px;
  left: -25px;
  background: linear-gradient(to bottom,#ffbe0b,2%,#f72585,2%,#f72585,70%,#ffe66d);
-webkit-box-reflect: below 0px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}
.b-4::after{
  content: "";
  position: absolute;
  width: 90px;
  height: 5px;
  background: #4ecdc4;
  -webkit-box-reflect: below 430px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
}
.w-4{
  position: absolute;
  height: 6px;
  width: 18px;
  top: 15px;
  left: 10px;
  background: #4ecdc4;
  box-shadow: 25px 0px 0px #4ecdc4,
50px 0px 0px #4ecdc4,
0px 15px 0px #4ecdc4,
25px 15px 0px #4ecdc4,
0px 30px 0px #4ecdc4,
25px 30px 0px #4ecdc4,
50px 30px 0px #4ecdc4,
0px 45px 0px #4ecdc4,
25px 45px 0px #4ecdc4,
50px 45px 0px #4ecdc4,
0px 60px 0px #4ecdc4,
50px 60px 0px #4ecdc4,
0px 75px 0px #4ecdc4,
50px 75px 0px #4ecdc4,
0px 90px 0px #4ecdc4,
25px 90px 0px #4ecdc4,
50px 90px 0px #4ecdc4,
0px 105px 0px #4ecdc4,
25px 105px 0px #4ecdc4,
50px 105px 0px #4ecdc4,
0px 120px 0px #4ecdc4,
25px 120px 0px #4ecdc4,
50px 120px 0px #4ecdc4,
0px 135px 0px #4ecdc4,
25px 135px 0px #4ecdc4,
50px 135px 0px #4ecdc4,
0px 150px 0px #4ecdc4,
50px 150px 0px #4ecdc4,
0px 165px 0px #4ecdc4,
50px 165px 0px #4ecdc4,
0px 180px 0px #4ecdc4,
25px 180px 0px #4ecdc4,
50px 180px 0px #4ecdc4,
25px 195px 0px #4ecdc4,
50px 195px 0px #4ecdc4;
}
.b-5{
  position: absolute;
  height: 180px;
  width: 80px;
  top: 359px;
  left: 591px;
  background: linear-gradient(to bottom,#7b2cbf,#d100d1,#ff4d6d);
-webkit-box-reflect: below 0px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}
.line-5{
  position: absolute;
  width: 4px;
  height: 160px;
  background: linear-gradient(to bottom,#001845,#3c096c,#c9184a);
  top: 20px;
  left: -12px;
  -webkit-box-reflect: below 0px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}
.b-5::before{
  content: "";
  position: absolute;
  height: 180px;
  width: 19px;
  left: -19px;
  background: linear-gradient(to bottom,#ffbe0b,3%,#f72585,2%,#f72585,70%,#ffe66d);
-webkit-box-reflect: below 0px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}
.b-5::after{
  content: "";
  position: absolute;
  width: 80px;
  height: 5px;
  background: #4ecdc4;
  -webkit-box-reflect: below 430px
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5));
}
.w-5{
  position: absolute;
  height: 5px;
  width: 17px;
  top: 15px;
  left: 6px;
  background: #4ecdc4;
  box-shadow: 25px 0px #4ecdc4,
    50px 0px #4ecdc4,
    0px 15px #4ecdc4,
    25px 15px #4ecdc4,
    0px 30px #4ecdc4,
    25px 30px #4ecdc4,
    50px 30px #4ecdc4,
    0px 45px #4ecdc4,
    25px 45px #4ecdc4,
    50px 45px #4ecdc4,
    0px 60px #4ecdc4,
    50px 60px #4ecdc4,
    0px 75px #4ecdc4,
    50px 75px #4ecdc4,
    0px 90px #4ecdc4,
    25px 90px #4ecdc4,
    50px 90px #4ecdc4,
    0px 105px #4ecdc4,
    25px 105px #4ecdc4,
    50px 105px #4ecdc4,
    0px 120px #4ecdc4,
    50px 120px #4ecdc4,
.........完整代码请登录后点击上方下载按钮下载查看