HTML
<div class="container">
<div class="sol"></div>
<div class="cerros">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="lineas">
<span class="l1"></span>
<span class="l2"></span>
<span class="l3"></span>
<span class="l4"></span>
<span class="l5"></span>
<span class="l6"></span>
<span class="l7"></span>
<span class="l8"></span>
</div>
<div class="sea"></div><div class="velero"><span class="rastro"></span></div>
<div class="bird5">
<div class="bird7">
<div class="head"><div class="ojo"></div><div class="boca"></div></div>
<div class="ala3"></div>
<div class="body"></div>
<div class="ala"></div>
<div class="cola"></div>
</div>
</div>
<div class="bird">
<div class="bird3">
<div class="head"><div class="ojo"></div><div class="boca"></div></div>
<div class="ala3"></div>
<div class="body"></div>
<div class="ala"></div>
<div class="cola"></div>
</div>
</div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:400px;
height:300px;
background-image: linear-gradient(to top, #ffc6d6 0%, #ace0f9 100%);
border:3px solid #eaeaea;
margin:121px auto;
overflow:hidden;
}
.sol{
position:absolute;
width:112px;
height:112px;
border-radius:100%;
background-image: linear-gradient(to right, #fceabf 0%, #ffdc85 100%);
margin:33px 90px;
}
.c1{
position:absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 90px solid #385B6B;
border-bottom: 50px solid transparent;;
margin:172px 162px
}
.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:201px 225px
}
.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:172px 281px
}
.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:333;
}
.l1,.l2,.l3,.l4,.l5,.l6,.l7,.l8{
position:absolute;
width:50px;
height:1px;
background:white;
margin:300px 30px
}
.l1{
width:70px;
margin:212px 30px
}
.l2{
width:50px;
margin:231px 172px
}
.l3{
width:30px;
margin:251px 330px
}
.l4{
width:50px;
margin:212px 330px
}
.l5{
width:70px;
margin:251px 70px
}
.l6{
width:70px;
margin:201px 212px
}
.l7{
width:50px;
margin:271px 231px
}
.l8{
width:50px;
margin:281px 33px
}
.l1,.l3,.l5,.l7{
animation:brillo 3s alternate infinite;
}
.l2,.l4,.l6,.l8{
animation:brillo3 3s alternate infinite;
}
.bird{
position:absolute;
margin:50px -300px;
animation:volar 12s linear infinite;
}
.bird5{
position:absolute;
margin:60px -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:white;
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 white;
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:white;
margin:150px 0
}
.ala{
position:absolute;
width:30px;
height:50px;
background:white;
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:white;
margin:90px 221px;
transform:rotate(-12deg)
}
.cola::before{
content:"";
position:absolute;
width:30px;
height:30px;
border-radius: 0px 70px 0px 70px;
background:white;
margin:0px 3px;
transform:rotate(50deg)
}
.cola::after{
content:"";
position:absolute;
width:30px;
height:30px;
border-radius: 0px 70px 0px 70px;
background:white;
margin:12px -3px;
transform:rotate(-30deg)
}
.sea{
position:absolute;
width:400px;
height:152px;
background-image: linear-gradient(to top, #6f86d6 0%, #48c6ef 100%);
margin:192px 0px;
}
.velero{
position:absolute;
border-top: 12px solid #d12956;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 40px;
margin:251px 470px;
z-index:999;
animation: nave 30s linear infinite;
}
.velero::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 70px solid #003554;
border-right: 12px solid transparent;
margin:-83px 21px;
}
.velero::after{
content:"";
display:block;
width:65px;
height:33px;
border-radius: 121px 121px 0 0;
background:white;
transform: rotate(-90deg);
margin:35px -30px;
}
.rastro{
position:absolute;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 80px solid rgba(255,255,255,.3);
border-bottom: 9px solid transparent;
margin:83px 43px;
animation: nave3 9s alternate infinite;
}
@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}
}
@keyframes nave{
0% {transform:translateX(0px) }
100% {transform:translateX(-670px) }
}
@keyframes nave3{
0% {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 80px solid rgba(255,255,255,.3);
border-bottom: 9px solid transparent;}
100% {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 50px solid rgba(255,255,255,.12);}}
