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