css实现一个城市夜间倒影效果代码-html代码-BFW代码库

css实现一个城市夜间倒影效果代码

代码语言：html

代码描述：css实现一个城市夜间倒影效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body{background:black;}

.contenedor{
  position:relative;
  width:600px;
  height:600px;
  border-radius:100%;
  background:#060606;
  margin:221px auto;
  }
.contenedor::before{
  content:"";
  position:absolute;
  width:600px;
  height:300px;
  border-radius:0 0 600px 600px;
  background:#070707;
  margin:312px auto;
  border-top:3px solid black;
}
.edi{
  position:absolute;
  margin:-3px 25px;
}
.edi1{
  position:absolute;
  width:70px;
  height:112px;
  background:black;
  margin:192px 90px;
  border:3px solid #212121;
  box-shadow: 3px 121px 33px 0px rgba(110,245,227,0.12);
}
.edi1::before{
  content:"";
  position:absolute;
  width:3px;
  height:40px;
  background:#121212;
  margin:-43px 33px
}
.l1,.l2,.l3,.l4,.l5,.l6{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:100%;
  -webkit-animation:go 1.2s alternate infinite;
          animation:go 1.2s alternate infinite;
  }
.l1{
  background:cyan;
  margin:-45px 28px;
  box-shadow: 3px 321px 12px 0px rgba(110,245,227,0.3);
}
 .l2{
   background:#ff6666;
   margin:-55px 19px;
   box-shadow: -3px 360px 12px 0px rgba(245,110,110,0.3);
} 
.l3{
   background:#0BAEE0;
   margin:-40px 23px;
   box-shadow: -3px 251px 12px 0px rgba(0,142,250,0.3);
}
 .l4{ 
   background:#E212AB;
   margin:-40px 14px;
   box-shadow: -3px 421px 12px 0px rgba(250,0,142,0.3);
}
.l5{ 
   background:#3405B7;
   margin:-30px 38px;
   box-shadow: -3px 201px 12px 0px rgba(52,3,247,0.3);
}
 .l6{ 
   background:#FCF407;
   margin:-50px 21px;
   box-shadow: -3px 370px 12px 0px rgba(245,149,5,0.3);
}
.edi2{
  position:absolute;
  width:50px;
  height:132px;
  background:black;
  margin:172px 162px;
  border:3px solid #212121;
  box-shadow: -3px 132px 33px 0px rgba(245,110,110,0.12);
  }
.edi2::before{
  content:"";
  position:absolute;
  width:3px;
  height:35px;
  background:#121212;
  margin:-40px 23px
}
.edi3{
  position:absolute;
  width:60px;
  height:80px;
  background:black;
  margin:224px 214px;
  border:3px solid #212121;
  box-shadow: -3px 85px 33px 0px rgba(0,142,250,0.12);
}
.edi3::before{
  content:"";
  position:absolute;
  width:3px;
  height:30px;
  background:#121212;
  margin:-40px 27px
}
.edi4{
  position:absolute;
  width:40px;
  height:172px;
  background:black;
  margin:132px 277px;
  border:3px solid #212121;
  box-shadow: -3px 172px 33px 0px rgba(250,0,142,0.12);
}
.edi4::before{
  content:"";
  position:absolute;
  width:3px;
  height:35px;
  background:#121212;
  margin:-40px 19px
}
.edi5{
  position:absolute;
  width:90px;
  height:60px;
  background:black;
  margin:244px 321px;
  border:3px solid #212121;
  box-shadow: -3px 70px 33px 0px rgba(52,3,247,0.12);
}
.edi5::before{
  content:"";
  position:absolute;
  width:3px;
  height:25px;
  background:#121212;
  margin:-35px 43px
}
.edi6{
  position:absolute;
  width:50px;
  height:132px;
  background:black;
  margin:172px 412px;
  border:3px solid #212121;
  box-shadow: -3px 135px 33px 0px rgba(245,149,5,0.12);
}
.edi6::before{
  content:"";
  position:absolute;
  width:3px;
  height:50px;
  background:#121212;
  margin:-55px 25px
}
ul.e1{
  position:absolute;
  width:70px;
  height:112px;
  margin:3px -34px;
  list-style:none;
}
ul.e1 li{
  display:inline-block;
  width:21px;
  height:12.........完整代码请登录后点击上方下载按钮下载查看