纯css做成的小鹿地球月亮闪烁的星星

蚂蚁小草

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">

body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#100321;
margin:90px auto;
padding-top:50px
}
.luna{
position:absolute;
width:152px;
height:152px;
border-radius: 100%;
box-shadow:0 0 90px #FFf;
background:rgba(255,255,255,.7);
margin:152px 80px
}
.bosque{
position:relative;
width:300px;
height:550px;
background: -webkit-linear-gradient(top, rgba(8,0,15,1) 0%,rgba(38,28,66,1) 100%);
background: linear-gradient(to bottom, rgba(8,0,15,1) 0%,rgba(38,28,66,1) 100%);
margin:0px auto;
box-shadow:5px 5px 3px rgba(0,0,0,.3);
overflow:hidden;
}
.cerro{
position:absolute;
width:350px;
height:350px;
border-radius:100%;
background: -webkit-linear-gradient(top, rgba(117,56,112,1) 0%,rgba(117,56,112,0.97) 1%,rgba(53,17,36,0) 35%);
background: linear-gradient(to bottom, rgba(117,56,112,1) 0%,rgba(117,56,112,0.97) 1%,rgba(53,17,36,0) 35%);
margin:350px -21px
}
.ciervo{
position:absolute;
margin:221px 142px;
transform:scale(.3)
}
.head{
position:absolute;
width: 70px;
height: 90px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#100026;
margin:90px
}
.cuello{
position:absolute;
border-bottom: 102px solid #100026;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 25px;
margin:152px 102px
}
.orejas{
position:absolute;
width:21px;
height:21px;
border-radius:30px 300px 30px 300px;
background:#100026;
margin:25px -13px;
transform:rotate(-12deg)
}
.orejas::before{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:300px 30px 300px 30px;
background:#100026;
margin:17px 73px;
transform:rotate(24deg)
}
.body{
position:absolute;
width:192px;
height:90px;
border-radius: 0 0 321px 321px;
background:#100026;
margin:251px -41px;
}
.body::before{
content:"";
display:block;
width: 142px;
height: 221px;
border-bottom: 50px solid #100026;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-radius: 152px / 121px;
margin:-225px -21px
}
.body::after{
content:"";
position:absolute;
width:63px;
height:63px;
border-radius:100%;
background:#100026;
margin:155px -3px
}
.legs{/*legs 羊腿*/
position:absolute;
border-top: 172px solid #100026;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 12px;
margin:300px 70px ;
transform: rotate(9deg);
}
.legs3{
position:absolute;
border-top: 185px solid #100026;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 12px;
margin:291px 112px ;
transform: rotate(-12deg);
}
.legs7{
position:absolute;
width:90px;
height:45px;
border-radius:0 0 132px 132px;
background:#100026;
margin:251px -70px;
transform:rotate(90deg)
}
.legs7::before{
content:"";
position:absolute;
border-top: 192px solid #100026;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 12px;
margin:-45px 132px ;
transform: rotate(-75deg);
}
.legs9{
position:absolute;
border-top: 172px solid #100026;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 12px;
margin:300px -7px ;
transform: rotate(-9deg);
}
.cola{
position:absolute;
width:70px;
height:95px;
border-radius:100%;
border-left:21px solid #100026;
margin:225px -69px;
transform:rotate(35deg)
}
.cuernos,.cuernos3{
position:absolute;
width:172px;
height:172px;
border-radius:100%;
border-bottom:12px solid #100026;

}
.cuernos{
position:absolute;
margin:-60px 40px;
}
.cuernos3{
position:absolute;
margin:-55px 40px;
transform:scale(.7)
}
.c1{
position:absolute;
width:50px;
height:50px;
border-radius:100%;
border-right:7px solid #100026;
margin:121px 90px;
transform:rotate(-21deg)
}
.c1::before{
content:"";
position:absolute;
width:50px;
height:50px;
border-radius:100%;
border-right:7px solid #100026;
margin:30px 50px;
transform:rotate(-70deg)
}
.c2{
position:absolute;
width:50px;
height:50px;
border-radius:100%;
border-left:7px solid #100026;
margin:121px 30px;
transform:rotate(0deg)
}
.c2::before{
content:"";
position:absolute;
width:50px;
height:50px;
border-radius:100%;/*radius 半径*/
border-right:7px solid #100026;
margin:7px -73px;
transform:rotate(-93deg)
}
.s1,.s2,.s3,.s4,.s5{/*五个星星*/
position:absolute;/*absolute 绝对定位*/
border-radius:100%;
background:white;
box-shadow:0px 0px 1px 2px rgb(150,124,201);/*阴影*/
}
.s1{
width:5px;
height:5px;
margin:30px 30px;
animation:brilla 1.2s alternate infinite;/*animation 动画*/
}
.s2{
width:5px;
height:5px;
margin:30px 261px;
animation:brilla .9s alternate infinite;
}
.s3{
width:3px;
height:3px;
margin:12px 145px;
animation:brilla .8s alternate infinite;
}
.s4{
width:3px;
height:3px;
margin:70px 90px;
animation:brilla .7s alternate infinite;
}
.s5{
width:3px;
height:3px;
margin:70px 201px;
animation:brilla .6s alternate infinite;
}

@keyframes brilla{
0%{opacity:0.3}/*从0.0（完全透明）到1.0（完全不透明）*/
100%{opacity:1}
}

</style>

</head>
<body>

<div class="container">
<div class="bosque">
<div class="luna"></div>
<div class="stars">
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
<span class="s4"></span>
<span class="s5"></span>
</div>
<div class="cerro"></div>
<div class="ciervo">
<div class="head"><div class="orejas"></div><div class="orejas3"></div></div>
<div class="cuello"></div>
<div class="legs3"></div>
<div class="legs9"></div>
<div class="body"></div>
<div class="legs"></div>
<div class="legs7"></div>
<div class="cola"></div>
<div class="cuernos">
<span class="c1"></span>
<span class="c2"></span>
</div>
<div class="cuernos3">
<span class="c1"></span>
<span class="c2"></span>
</div>
</div>
</div>
</div>

</body>
</html>

纯css做成的小鹿地球月亮闪烁的星星

猜你喜欢