Ocean

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);}}
JAVASCRIPT
Expand for more options Login