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

网友评论0