In the beach (Only CSS)

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="sea"></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="sol3"></div> <div class="arena"</div> <div class="arena3"><span class="arenas"></span></div> <div class="arenas3"></div> <div class="girl"> <div class="legs3"></div> <div class="legs"></div> <div class="body7"></div> <div class="body3"></div> <div class="brazos"><div class="hands"></div></div> <div class="brazos3"><div class="hands3"></div></div> <div class="hut"></div> <div class="so3"></div> </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 class="so"></div> </div>
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} }
JAVASCRIPT
Expand for more options Login