CSS
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#B3D1F2;
margin:90px auto;
overflow:hidden;
}
.sol{
position:absolute;
width:172px;
height:172px;
border-radius:100%;
background: rgb(255,243,181);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,243,181,1) 52%, rgba(247,221,93,1) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,243,181,1) 52%,rgba(247,221,93,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,243,181,1) 52%,rgba(247,221,93,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff3b5', endColorstr='#f7dd5d',GradientType=1 );
margin:21px 50px;
}
.c1{
position:absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 90px solid #385B6B;
border-bottom: 50px solid transparent;;
margin:251px 509px
}
.c1::before{
content:"";
position:absolute;
width:30px;
height:21px;
background:#385B6B;
margin:-49px 88px
}
.c1::after{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #385B6B;
margin:-60px 65px
}
.c2{
position:absolute;
border-bottom: 30px solid #0D4D6B;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 30px;
margin:261px 621px
}
.c2::before{
content:"";
position:absolute;
border-bottom: 21px solid #0D4D6B;
border-left: 12px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 30px;
margin:-7px -7px
}
.c2::after{
content:"";
position:absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 90px solid #0D4D6B;
border-bottom: 50px solid transparent;;
margin:-30px -12px
}
.c3{
position:absolute;
border-bottom: 70px solid #0D4D6B;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 50px;
margin:231px 677px
}
.c3::before{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 70px solid #0D4D6B;
margin:-30px 12px
}
.lineas{
position:absolute;
z-index:999;
}
.l1,.l2,.l3,.l4,.l5,.l6,.l7,.l8{
position:absolute;
width:50px;
height:1px;
background:white;
margin:300px 30px
}
.l1{
width:70px;
margin:300px 30px
}
.l2{
width:50px;
margin:312px 90px
}
.l3{
width:30px;
margin:325px 70px
}
.l4{
width:50px;
margin:312px 330px
}
.l5{
width:70px;
margin:318px 430px
}
.l6{
width:70px;
margin:291px 670px
}
.l7{
width:50px;
margin:303px 650px
}
.l8{
width:90px;
margin:314px 670px
}
.l1,.l3,.l5,.l7{
animation:brillo 3s alternate infinite;
}
.l2,.l4,.l6,.l8{
animation:brillo3 3s alternate infinite;
}
.girl{
position:absolute;
margin:0 30px;
z-index:999;
}
.arenas3{
position:absolute;
width:231px;
height:90px;
border-radius:100%;
background:#DBBC74;
z-index:999;
margin:55px 291px
}
.legs{
position:absolute;
width:80px;
height:21px;
border-radius:100%;
background:#E2A581;
margin: 90px 300px;
transform:rotate(21deg)
}
.legs::before{
content:"";
position:absolute;
width:80px;
height:21px;
border-radius:100%;
background:#E2A581;
margin: -30px 75px;
transform:rotate(-42deg)
}
.legs3{
position:absolute;
width:80px;
height:16px;
border-radius:100%;
background:#E2A581;
margin: 73px 303px;
transform:rotate(-9deg)
}
.legs3::before{
content:"";
position:absolute;
width:80px;
height:16px;
border-radius:100%;
background:#E2A581;
margin: 12px 75px;
transform:rotate(18deg)
}
.brazos,.brazos3{
position:absolute;
width:12px;
height:50px;
border-radius:100%;
background:#EA9D79;
}
.brazos{
margin: 30px 340px;
transform:rotate(21deg)
}
.brazos3{
margin: 30px 408px;
transform:rotate(-21deg)
}
.brazos::before,.brazos3::before{
content:"";
position:absolute;
width:12px;
height:70px;
border-radius:100%;
background:#EA9D79;
transform:rotate(0deg)
}
.brazos::before{margin: 30px 0px;}
.brazos3::before{margin: 30px 0px;}
.hands{
position:absolute;
width:21px;
height:9px;
border-radius:100%;
background:#EA9D79;
margin:93px -12px
}
.hands3{
position:absolute;
width:21px;
height:9px;
border-radius:100%;
background:#EA9D79;
margin:93px 3px
}
.body3{
position:absolute;
border-bottom: 30px solid #E067CA;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 30px;
margin:63px 353px
}
.body3::before{
content:"";
position:absolute;
width:53px;
height:30px;
border-radius: 0 0 50px 50px;
background:black;
margin:30px -12px
}
.body3::after{
content:"";
position:absolute;
border-top: 21px solid #E067CA;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 30px;
margin:-21px -12px
}
.body7{
position:absolute;
width:60px;
height:12px;
border-radius:9px;
background:#EA9D79;
margin:30px 350px
}
.hut{
position:absolute;
width:112px;
height:112px;
border-radius:100%;
background:#DD35B0;
margin:-75px 325px
}
.hut::before{
content:"";
position:absolute;
width:35px;
height:35px;
border-radius:100%;
background:#E067CA;
margin:40px 37px
}
.bird{
position:absolute;
margin:-300px -300px;
animation:volar 12s linear infinite;
}
.bird5{
position:absolute;
margin:-291px -330px;
animation:volar3 12s linear infinite;
}
.bird3{
position:absolute;
transform:scale(.4)
}
.bird7{
position:absolute;
transform:scale(.3)
}
.head{
position:absolute;
width:25px;
height:25px;
border-radius:90px 90px 0;
background:#ddd;
transform:rotate(-45deg);
margin:102px 291px
}
.ojo{
position:absolute;
width:5px;
height:5px;
border-radius:100%;
background:black;
margin:12px 14px
}
.boca{
position:absolute;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 7px solid #FFAE44;
border-bottom: 7px solid transparent;
transform:rotate(45deg);
margin:17px 21px
}
.body{
position:absolute;
width: 65px;
height: 150px;
border-bottom: 12px solid #ddd;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-radius: 90px / 100px;
margin:-30px 231px
}
.body::before{
content:"";
position:absolute;
width:55px;
height:30px;
border-radius: 0 0 70px 70px;
background:#ddd;
margin:150px 0
}
.ala{
position:absolute;
width:30px;
height:50px;
background:#ddd;
border-radius:0px 112px 0px 112px;
transform-origin:center bottom;
margin:80px 251px;
animation:rotar 3s alternate infinite;
}
.ala3{
position:absolute;
width:30px;
height:50px;
background:#ccc;
border-radius:0px 112px 0px 112px;
transform-origin:center bottom;
margin:80px 241px;
animation:rotar 3s alternate infinite;
}
.cola{
position:absolute;
width:30px;
height:30px;
border-radius: 0px 70px 0px 70px;
background:#ddd;
margin:90px 221px;
transform:rotate(-12deg)
}
.cola::before{
content:"";
position:absolute;
width:30px;
height:30px;
border-radius: 0px 70px 0px 70px;
background:#ddd;
margin:0px 3px;
transform:rotate(50deg)
}
.cola::after{
content:"";
position:absolute;
width:30px;
height:30px;
border-radius: 0px 70px 0px 70px;
background:#ddd;
margin:12px -3px;
transform:rotate(-30deg)
}
.arena{
position:absolute;
width:800px;
height:201px;
background:#DDC58B;
margin:400px 0px;
}
.arena::before{
content:"";
position:absolute;
width:300px;
height:152px;
border-radius:300px 300px 0 0;
background:#DDC58B;
margin:-21px -112px;
}
.arena::after{
content:"";
position:absolute;
width:300px;
height:152px;
border-radius:300px 300px 0 0;
background:#DDC58B;
margin:-12px 50px;
}
.arena3{
position:absolute;
width:300px;
height:152px;
border-radius:300px 300px 0 0;
background:#DDC58B;
margin:-21px 212px;
}
.arena3::before{
content:"";
position:absolute;
width:300px;
height:152px;
border-radius:300px 300px 0 0;
background:#DDC58B;
margin:9px 152px;
}
.arena3::after{
content:"";
position:absolute;
width:300px;
height:152px;
border-radius:300px 300px 0 0;
background:#DDC58B;
margin:3px 261px;
}
.arenas{
position:absolute;
width:300px;
height:152px;
border-radius:300px 300px 0 0;
background:#DDC58B;
margin:7px 412px;
}
.sea{
position:absolute;
width:800px;
height:152px;
background: rgb(70,180,214);
background: -moz-linear-gradient(top, rgba(70,180,214,1) 0%, rgba(168,221,237,1) 100%);
background: -webkit-linear-gradient(top, rgba(70,180,214,1) 0%,rgba(168,221,237,1) 100%);
background: linear-gradient(to bottom, rgba(70,180,214,1) 0%,rgba(168,221,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46b4d6', endColorstr='#a8dded',GradientType=0 );
margin:271px 0px;
}
.so{
position:absolute;
width: 0;
height: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
border-bottom: 90px solid #FF6DB6;
margin:-192px 258px;
z-index:999;
}
.so3{
position:absolute;
width:9px;
height:251px;
background:white;
border-right:5px solid #eaeaea;
margin:-112px 374px
}
.so3::before{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:white;
border-right:3px solid #eaeaea;
margin:-100px -5px
}
@keyframes rotar{
0%{transform:rotatez(0deg) rotatey(0deg) }
100%{transform:rotatez(132deg) rotatey(152deg) }
}
@keyframes volar{
0%{transform:translatex(-30px) translatey(0px)}
25%{transform:translatex(231px) translatey(12px)}
30%{transform:translatex(300px) translatey(-30px)}
40%{transform:translatex(400px) translatey(12px)}
50%{transform:translatex(500px) translatey(-21px)}
60%{transform:translatex(600px) translatey(21px)}
70%{transform:translatex(700px) translatey(0px)}
80%{transform:translatex(800px) translatey(-9px)}
90%{transform:translatex(900px) translatey(9px)}
100%{transform:translatex(1052px) translatey(0px)}
}
@keyframes volar3{
0%{transform:translatex(-30px) translatey(0px)}
25%{transform:translatex(321px) translatey(-30px)}
30%{transform:translatex(400px) translatey(30px)}
40%{transform:translatex(450px) translatey(-12px)}
50%{transform:translatex(550px) translatey(33px)}
60%{transform:translatex(630px) translatey(-33px)}
70%{transform:translatex(750px) translatey(9px)}
80%{transform:translatex(850px) translatey(33px)}
90%{transform:translatex(930px) translatey(-33px)}
100%{transform:translatex(1052px) translatey(-9px)}
}
@keyframes brillo{
0%{opacity:1}
100%{opacity:0.3}
}
@keyframes brillo3{
0%{opacity:0.3}
100%{opacity:1}
}
