CSS
body{background:black}
.rayo{
position:absolute;
width: 0;
height: 0;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
border-bottom: 300px solid rgba(255,255,255,.03);
margin:300px 102px
}
.rayo::before{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 300px solid rgba(255,255,255,.03);
margin:-300px -95px
}
.rayo::after{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 121px solid transparent;
border-right: 121px solid transparent;
border-bottom: 300px solid rgba(255,255,255,.03);
margin:-300px -127px
}
.cisne{
position:absolute;
margin:-50px 112px;
transform:scale(.7);
animation: sube 3s alternate infinite;
}
.cisne3{
position:absolute;
margin:612px 570px;
opacity:.3;
transform:scale(.4) rotate(-180deg);
animation:sube3 3s alternate infinite;
}
.cabeza{
position:absolute;
margin:0 0;
width:30px;
height:30px;
background:red;
}
.contenedor{
position:relative;
width:800px;
height:600px;
background:#122838;
margin:121px auto;
}
.contenedor::before{
content:"";
position:absolute;
width:800px;
height:300px;
background:#173242;
margin:300px 0
}
.cuello{
position:absolute;
width: 60px;
height: 172px;
border-top: 40px solid white;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-radius: 132px / 100px;
margin:212px 300px;
transform:rotate(-70deg)
}
.cuello::before{
content:"";
position:absolute;
width: 90px;
height: 150px;
border-top: 40px solid white;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-radius: 100px / 100px;
margin:-46px -65px;
transform:rotate(60deg)
}
.cuello::after{
content:"";
position:absolute;
width: 172px;
height: 150px;
border-top: 43px solid white;
border-left: 40px solid transparent;
border-right: 60px solid transparent;
border-radius: 182px / 100px;
margin:-53px -172px;
transform:rotate(187deg)
}
.cuello3{
position:absolute;
width: 75px;
height: 89px;
border-top: 40px solid white;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-radius: 121px / 100px;
margin:242px 293px;
transform:rotate(65deg)
}
.body{
position:absolute;
width:231px;
height:165px;
border-radius:100%;
background:#ccc;
margin:423px 300px;
}
.body::before{
content:"";
display:block;
width:152px;
height:152px;
border-radius:100%;
border-bottom:70px solid #ccc;
transform:rotate(-40deg);
margin:-121px 63px
}
.body3{
position:absolute;
width:216px;
height:162px;
border-radius:100%;
background:white;
margin:421px 307px;
}
.body3::before{
content:"";
display:block;
width:142px;
height:132px;
border-radius:100%;
border-bottom:60px solid white;
transform:rotate(-35deg);
margin:-85px 60px
}
.body3::after{
content:"";
display:block;
width:142px;
height:142px;
border-radius:100%;
border-bottom:60px solid white;
transform:rotate(-45deg);
margin:-241px 30px
}
.head{
position:absolute;
width:60px;
height:73px;
border-radius:100%;
background:white;
margin:271px 259px;
animation:baja 3s alternate infinite;
}
.ala{
position:absolute;
width:21px;
height:227px;
border-radius:21px 0px 0px 0px;
background:#ddd;
margin: 172px 512px;
transform:rotate(21deg)
}
.ala::before{
content:"";
position:absolute;
width:21px;
height:192px;
border-radius:21px 0px 0px 0px;
background:#ddd;
margin: -135px 70px;
transform:rotate(50deg)
}
.ala3{
position:absolute;
width:21px;
height:261px;
border-radius:0px 21px 0px 0px;
background:#ccc;
margin: 172px 312px;
transform:rotate(-21deg)
}
.ala3::before{
content:"";
position:absolute;
width:21px;
height:192px;
border-radius:21px 0px 0px 0px;
background:#ccc;
margin: -135px -70px;
transform:rotate(-50deg)
}
.alas,.alas3{
position:absolute;
margin:0 0;
animation:sube5 3s alternate infinite;
}
.a1{
position:absolute;
width:251px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .3);
margin:149px 550px;
transform:rotate(-21deg);
}
.a1::before{
content:"";
position:absolute;
width:251px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .3);
margin:12px -12px;
transform:rotate(3deg);
}
.a1::after{
content:"";
position:absolute;
width:241px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .3);
margin:21px -12px;
transform:rotate(7deg);
}
.a2{
position:absolute;
width:241px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .4);
margin:185px 545px;
transform:rotate(-9deg);
}
.a2::before{
content:"";
position:absolute;
width:231px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .4);
margin:9px -9px;
transform:rotate(5deg);
}
.a2::after{
content:"";
position:absolute;
width:221px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .4);
margin:21px -12px;
transform:rotate(9deg);
}
.a3{
position:absolute;
width:212px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:221px 535px;
transform:rotate(5deg);
}
.a3::before{
content:"";
position:absolute;
width:212px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:9px 0px;
transform:rotate(7deg);
}
.a3::after{
content:"";
position:absolute;
width:201px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:21px 0px;
transform:rotate(12deg);
}
.a4{
position:absolute;
width:201px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:251px 530px;
transform:rotate(25deg);
}
.a4::before{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:12px 3px;
transform:rotate(3deg);
}
.a4::after{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:21px 3px;
transform:rotate(7deg);
}
.a5{
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:281px 521px;
transform:rotate(35deg);
}
.a5::before{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px 3px;
transform:rotate(3deg);
}
.a5::after{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:21px 3px;
transform:rotate(7deg);
}
.a6{
position:absolute;
width:182px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:312px 512px;
transform:rotate(43deg);
}
.a6::before{
content:"";
position:absolute;
width:182px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px 3px;
transform:rotate(5deg);
}
.a6::after{
content:"";
position:absolute;
width:172px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:21px 3px;
transform:rotate(7deg);
}
.a7{
position:absolute;
width:172px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:330px 495px;
transform:rotate(53deg);
}
.a7::before{
content:"";
position:absolute;
width:172px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px -3px;
transform:rotate(3deg);
}
.a7::after{
content:"";
position:absolute;
width:172px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:21px -3px;
transform:rotate(5deg);
}
.a8{
position:absolute;
width:162px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:355px 475px;
transform:rotate(63deg);
}
.a8::before{
content:"";
position:absolute;
width:152px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px 3px;
transform:rotate(7deg);
}
.a8::after{
content:"";
position:absolute;
width:152px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:21px 3px;
transform:rotate(12deg);
}
.a9{
position:absolute;
width:142px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:355px 455px;
transform:rotate(83deg);
}
.a9::before{
content:"";
position:absolute;
width:132px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px 3px;
transform:rotate(7deg);
}
.a9::after{
content:"";
position:absolute;
width:152px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:21px 3px;
transform:rotate(12deg);
}
.b1{
position:absolute;
width:251px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .3);
margin:147px 30px;
transform:rotate(21deg);
}
.b1::before{
content:"";
position:absolute;
width:251px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .3);
margin:12px 9px;
transform:rotate(-3deg);
}
.b1::after{
content:"";
position:absolute;
width:241px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .3);
margin:21px 12px;
transform:rotate(-7deg);
}
.b2{
position:absolute;
width:241px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .4);
margin:179px 37px;
transform:rotate(9deg);
}
.b2::before{
content:"";
position:absolute;
width:231px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .4);
margin:9px 9px;
transform:rotate(-5deg);
}
.b2::after{
content:"";
position:absolute;
width:221px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .4);
margin:21px 21px;
transform:rotate(-9deg);
}
.b3{
position:absolute;
width:212px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:212px 65px;
transform:rotate(-5deg);
}
.b3::before{
content:"";
position:absolute;
width:212px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:9px 3px;
transform:rotate(-7deg);
}
.b3::after{
content:"";
position:absolute;
width:201px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:21px 3px;
transform:rotate(-12deg);
}
.b4{
position:absolute;
width:201px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:241px 83px;
transform:rotate(-25deg);
}
.b4::before{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:14px 12px;
transform:rotate(-3deg);
}
.b4::after{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:25px 12px;
transform:rotate(-7deg);
}
.b5{
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:271px 112px;
transform:rotate(-35deg);
}
.b5::before{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px 3px;
transform:rotate(-3deg);
}
.b5::after{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:21px 3px;
transform:rotate(-7deg);
}
.b6{
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:291px 142px;
transform:rotate(-43deg);
}
.b6::before{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px 3px;
transform:rotate(-3deg);
}
.b6::after{
content:"";
position:absolute;
width:192px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:21px 3px;
transform:rotate(-7deg);
}
.b7{
position:absolute;
width:172px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:325px 172px;
transform:rotate(-53deg);
}
.b7::before{
content:"";
position:absolute;
width:172px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px 3px;
transform:rotate(-3deg);
}
.b7::after{
content:"";
position:absolute;
width:172px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .5);
margin:21px 3px;
transform:rotate(-5deg);
}
.b8{
position:absolute;
width:162px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:355px 201px;
transform:rotate(-63deg);
}
.b8::before{
content:"";
position:absolute;
width:152px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px 3px;
transform:rotate(-7deg);
}
.b8::after{
content:"";
position:absolute;
width:152px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:23px 5px;
transform:rotate(-12deg);
}
.b9{
position:absolute;
width:142px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:375px 241px;
transform:rotate(-83deg);
}
.b9::before{
content:"";
position:absolute;
width:132px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:12px 3px;
transform:rotate(-7deg);
}
.b9::after{
content:"";
position:absolute;
width:152px;
height:21px;
border-radius:100%;
background:rgba(255, 255, 255, .6);
margin:21px 12px;
transform:rotate(-19deg);
}
.ojo{
position:absolute;
width:25px;
height:30px;
border-radius:100%;
border-bottom:12px solid black;
margin:35px 3px;
transform:rotate(-70deg)
}
.ojo::before{
content:"";
position:absolute;
width:33px;
height:33px;
border-radius:100%;
border-bottom:21px solid black;
margin:17px 12px;
transform:rotate(90deg)
}
.ojo::after{
content:"";
display:block;
width:9px;
height:9px;
border-radius:100%;
background:black;
margin:25px 21px
}
.boca{
position:absolute;
width: 0;
height: 0;
border-bottom: 33px solid #d84864;
border-left: 27px solid transparent;
transform:rotate(-192deg);
margin:65px 21px
}
.luna{
position:absolute;
width:90px;
height:90px;
border-radius:100%;
background:white;
margin:9px 350px;
box-shadow:0 0 21px #FFf;
}
.luna::before{
content:"";
position:absolute;
width:50px;
height:50px;
opacity:.3;
border-radius:100%;
background:white;
margin:530px 35px;
box-shadow:0 0 21px #FFf;
}
.s1{
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:white;
margin:90px 50px;
box-shadow:0 0 3px 3px rgba(255,255,255,.3);
animation:brillo 5s alternate infinite;
}
.s1::before{
content:"";
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:white;
margin:0px 695px;
box-shadow:0 0 3px 3px rgba(255,255,255,.3);
animation:brillo 5s alternate infinite;
}
.s2{
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:212px 121px;
box-shadow:0 0 3px 3px rgba(255,255,255,.3);
animation:brillo 5s alternate infinite;
}
.s2::before{
content:"";
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:0px 540px;
box-shadow:0 0 3px 3px rgba(255,255,255,.3);
animation:brillo 5s alternate infinite;
}
.s3{
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:500px 221px;
opacity:.3;
box-shadow:0 0 3px 3px rgba(255,255,255,.3);
animation:brillo 5s alternate infinite;
}
.s3::before{
content:"";
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:0px 360px;
box-shadow:0 0 3px 3px rgba(255,255,255,.3);
animation:brillo 5s alternate infinite;
}
.s5{
position:absolute;
width:5px;
height:5px;
border-radius:100%;
background:white;
margin:440px 271px;
opacity:.3;
box-shadow:0 0 3px 3px rgba(255,255,255,.3);
animation:brillo 5s alternate infinite;
}
.s5::before{
content:"";
position:absolute;
width:5px;
height:5px;
border-radius:100%;
background:white;
margin:0px 261px;
box-shadow:0 0 3px 3px rgba(255,255,255,.3);
animation:brillo 5s alternate infinite;
}
@keyframes sube{
0%{margin:-50px 112px}
50%{margin:-47px 112px;}
}
@keyframes sube3 {
0%{ margin:621px 570px;}
50%{margin:612px 570px;}
}
@keyframes sube5 {
0%{ margin:0px 0px;}
50%{margin:3px 3px;}
}
@keyframes baja {
0%{ margin:271px 259px;}
50%{margin:275px 259px;}
}
@keyframes brillo{
0%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
}
50%{box-shadow:0 0 3px 3px rgba(255,255,255,.7);
}
100%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
}}
