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