Sunset Bird

Bonito cuadro para insertar en nuestro Blog de Pájaros volando sobre un horizonte de un amanecer el cual es responsive y muy atractivo.

CODIGO HTML

<div class="world"> <div class="sunset"> <div class="sun"></div> <div class="bg"> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> </div> <div class="sea"></div> <div class="sky"></div> <div class="horizon"></div> </div> <div class="line -left"></div> <div class="line -right"></div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> <div class="birdposition"> <div class="bird"> <div class="wing -left"></div> <div class="wing -right"></div> </div> </div> </div>

CODIGO CSS

<style> body { background: #fff; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } div { transform-style: preserve-3d; } .world { perspective: 600px; } .sun { position: absolute; top: calc(50% + 40px); left: calc(50% - 50px); width: 100px; height: 55px; border-radius: 100px 100px 0 0; background: linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0%, white 100%); z-index: 999; filter: blur(4px) contrast(2); } .bg { position: absolute; top: calc(50% - 150px); left: calc(50% - 400px); width: 800px; height: 300px; background: yellow; filter: blur(5px) contrast(100); } .wave { position: absolute; top: calc(50% + 87px); left: calc(50% - 60px); width: 120px; height: 12px; background: #fff; border-radius: 100%; } .wave:not(:first-child) { -webkit-animation: wave 2000ms infinite linear; animation: wave 2000ms infinite linear; } .wave:nth-child(2) { -webkit-animation-delay: -500ms; animation-delay: -500ms; } .wave:nth-child(3) { -webkit-animation-delay: -1000ms; animation-delay: -1000ms; } .wave:nth-child(4) { -webkit-animation-delay: -1500ms; animation-delay: -1500ms; } .wave:nth-child(5) { -webkit-animation-delay: -1500ms; animation-delay: -1500ms; } .wave:nth-child(6) { -webkit-animation-delay: -2000ms; animation-delay: -2000ms; } @-webkit-keyframes wave { 0% { transform: translateY(0) sclae(1) rotateZ(0); } 50% { transform: translateY(40px) scale(0.5) rotateZ(5deg); } 100% { transform: translateY(30px) scale(0) rotateZ(-40deg); } } @keyframes wave { 0% { transform: translateY(0) sclae(1) rotateZ(0); } 50% { transform: translateY(40px) scale(0.5) rotateZ(5deg); } 100% { transform: translateY(30px) scale(0) rotateZ(-40deg); } } .sea { position: absolute; top: calc(50% + 80px); left: calc(50% - 400px); width: 800px; height: 70px; background: rgba(0, 0, 255, 0.5); background: radial-gradient(ellipse at top, white 0%, rgba(255, 215, 0, 0.1) 10%, chocolate 100%); } .sky { position: absolute; top: calc(50% - 150px); left: calc(50% - 400px); width: 800px; height: 240px; background: rgba(0, 0, 255, 0.5); background: radial-gradient(ellipse at bottom, yellow 0%, khaki 15%, orange 100%); } .horizon { position: absolute; top: 50%; width: 800px; height: 200px; border-radius: 100%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%); filter: blur(10px); } .sunset { position: relative; width: 800px; height: 300px; overflow: hidden; border-radius: 7px; } .line { position: absolute; top: calc(50%); left: calc(50% - 7px); width: 14px; height: calc(300px * 0.5); background: white; } .line.-left { transform: translateZ(300px) translateX(-70px) translateY(-50%); } .line.-right { transform: translateZ(300px) translateX(70px) translateY(-50%); } .birdposition { position: absolute; top: calc(50% + 60px); left: calc(50% - 40px); } .birdposition:nth-of-type(0) { transform: translate(215px, -50px) rotateZ(-7deg); } .birdposition:nth-of-type(0) .bird { -webkit-animation-duration: 7558ms; animation-duration: 7558ms; -webkit-animation-delay: -9ms; animation-delay: -9ms; } .birdposition:nth-of-type(0) .bird .wing { -webkit-animation-delay: -7060ms; animation-delay: -7060ms; } .birdposition:nth-of-type(1) { transform: translate(-30px, -15px) rotateZ(11deg); } .birdposition:nth-of-type(1) .bird { -webkit-animation-duration: 11259ms; animation-duration: 11259ms; -webkit-animation-delay: -7005ms; animation-delay: -7005ms; } .birdposition:nth-of-type(1) .bird .wing { -webkit-animation-delay: -19901ms; animation-delay: -19901ms; } .birdposition:nth-of-type(2) { transform: translate(142px, -145px) rotateZ(18deg); } .birdposition:nth-of-type(2) .bird { -webkit-animation-duration: 6057ms; animation-duration: 6057ms; -webkit-animation-delay: -15844ms; animation-delay: -15844ms; } .birdposition:nth-of-type(2) .bird .wing { -webkit-animation-delay: -16218ms; animation-delay: -16218ms; } .birdposition:nth-of-type(3) { transform: translate(101px, 15px) rotateZ(19deg); } .birdposition:nth-of-type(3) .bird { -webkit-animation-duration: 8959ms; animation-duration: 8959ms; -webkit-animation-delay: -8749ms; animation-delay: -8749ms; } .birdposition:nth-of-type(3) .bird .wing { -webkit-animation-delay: -15541ms; animation-delay: -15541ms; } .birdposition:nth-of-type(4) { transform: translate(120px, 6px) rotateZ(0deg); } .birdposition:nth-of-type(4) .bird { -webkit-animation-duration: 8433ms; animation-duration: 8433ms; -webkit-animation-delay: -9545ms; animation-delay: -9545ms; } .birdposition:nth-of-type(4) .bird .wing { -webkit-animation-delay: -8594ms; animation-delay: -8594ms; } .birdposition:nth-of-type(5) { transform: translate(-186px, -141px) rotateZ(12deg); } .birdposition:nth-of-type(5) .bird { -webkit-animation-duration: 8762ms; animation-duration: 8762ms; -webkit-animation-delay: -6891ms; animation-delay: -6891ms; } .birdposition:nth-of-type(5) .bird .wing { -webkit-animation-delay: -19203ms; animation-delay: -19203ms; } .birdposition:nth-of-type(6) { transform: translate(253px, -21px) rotateZ(18deg); } .birdposition:nth-of-type(6) .bird { -webkit-animation-duration: 9157ms; animation-duration: 9157ms; -webkit-animation-delay: -1025ms; animation-delay: -1025ms; } .birdposition:nth-of-type(6) .bird .wing { -webkit-animation-delay: -14210ms; animation-delay: -14210ms; } .birdposition:nth-of-type(7) { transform: translate(-142px, -114px) rotateZ(-15deg); } .birdposition:nth-of-type(7) .bird { -webkit-animation-duration: 14527ms; animation-duration: 14527ms; -webkit-animation-delay: -7456ms; animation-delay: -7456ms; } .birdposition:nth-of-type(7) .bird .wing { -webkit-animation-delay: -11028ms; animation-delay: -11028ms; } .birdposition:nth-of-type(8) { transform: translate(259px, -104px) rotateZ(-3deg); } .birdposition:nth-of-type(8) .bird { -webkit-animation-duration: 12248ms; animation-duration: 12248ms; -webkit-animation-delay: -9244ms; animation-delay: -9244ms; } .birdposition:nth-of-type(8) .bird .wing { -webkit-animation-delay: -11871ms; animation-delay: -11871ms; } .birdposition:nth-of-type(9) { transform: translate(-193px, 35px) rotateZ(-11deg); } .birdposition:nth-of-type(9) .bird { -webkit-animation-duration: 8661ms; animation-duration: 8661ms; -webkit-animation-delay: -10688ms; animation-delay: -10688ms; } .birdposition:nth-of-type(9) .bird .wing { -webkit-animation-delay: -13015ms; animation-delay: -13015ms; } .birdposition:nth-of-type(10) { transform: translate(220px, 30px) rotateZ(-8deg); } .birdposition:nth-of-type(10) .bird { -webkit-animation-duration: 13019ms; animation-duration: 13019ms; -webkit-animation-delay: -18347ms; animation-delay: -18347ms; } .birdposition:nth-of-type(10) .bird .wing { -webkit-animation-delay: -7151ms; animation-delay: -7151ms; } .birdposition:nth-of-type(11) { transform: translate(88px, -108px) rotateZ(-13deg); } .birdposition:nth-of-type(11) .bird { -webkit-animation-duration: 8937ms; animation-duration: 8937ms; -webkit-animation-delay: -19392ms; animation-delay: -19392ms; } .birdposition:nth-of-type(11) .bird .wing { -webkit-animation-delay: -10494ms; animation-delay: -10494ms; } .birdposition:nth-of-type(12) { transform: translate(233px, -58px) rotateZ(-2deg); } .birdposition:nth-of-type(12) .bird { -webkit-animation-duration: 8402ms; animation-duration: 8402ms; -webkit-animation-delay: -11334ms; animation-delay: -11334ms; } .birdposition:nth-of-type(12) .bird .wing { -webkit-animation-delay: -13829ms; animation-delay: -13829ms; } .birdposition:nth-of-type(13) { transform: translate(-204px, -121px) rotateZ(-17deg); } .birdposition:nth-of-type(13) .bird { -webkit-animation-duration: 10558ms; animation-duration: 10558ms; -webkit-animation-delay: -3193ms; animation-delay: -3193ms; } .birdposition:nth-of-type(13) .bird .wing { -webkit-animation-delay: -16605ms; animation-delay: -16605ms; } .birdposition:nth-of-type(14) { transform: translate(43px, -120px) rotateZ(15deg); } .birdposition:nth-of-type(14) .bird { -webkit-animation-duration: 5302ms; animation-duration: 5302ms; -webkit-animation-delay: -5746ms; animation-delay: -5746ms; } .birdposition:nth-of-type(14) .bird .wing { -webkit-animation-delay: -5726ms; animation-delay: -5726ms; } .birdposition:nth-of-type(15) { transform: translate(-249px, -19px) rotateZ(-19deg); } .birdposition:nth-of-type(15) .bird { -webkit-animation-duration: 5559ms; animation-duration: 5559ms; -webkit-animation-delay: -12320ms; animation-delay: -12320ms; } .birdposition:nth-of-type(15) .bird .wing { -webkit-animation-delay: -657ms; animation-delay: -657ms; } .birdposition:nth-of-type(16) { transform: translate(-121px, -70px) rotateZ(5deg); } .birdposition:nth-of-type(16) .bird { -webkit-animation-duration: 7609ms; animation-duration: 7609ms; -webkit-animation-delay: -9707ms; animation-delay: -9707ms; } .birdposition:nth-of-type(16) .bird .wing { -webkit-animation-delay: -7669ms; animation-delay: -7669ms; } .birdposition:nth-of-type(17) { transform: translate(278px, -44px) rotateZ(-11deg); } .birdposition:nth-of-type(17) .bird { -webkit-animation-duration: 10845ms; animation-duration: 10845ms; -webkit-animation-delay: -15952ms; animation-delay: -15952ms; } .birdposition:nth-of-type(17) .bird .wing { -webkit-animation-delay: -9751ms; animation-delay: -9751ms; } .birdposition:nth-of-type(18) { transform: translate(212px, -18px) rotateZ(8deg); } .birdposition:nth-of-type(18) .bird { -webkit-animation-duration: 11565ms; animation-duration: 11565ms; -webkit-animation-delay: -14877ms; animation-delay: -14877ms; } .birdposition:nth-of-type(18) .bird .wing { -webkit-animation-delay: -1874ms; animation-delay: -1874ms; } .birdposition:nth-of-type(19) { transform: translate(266px, -74px) rotateZ(10deg); } .birdposition:nth-of-type(19) .bird { -webkit-animation-duration: 10640ms; animation-duration: 10640ms; -webkit-animation-delay: -242ms; animation-delay: -242ms; } .birdposition:nth-of-type(19) .bird .wing { -webkit-animation-delay: -7942ms; animation-delay: -7942ms; } .birdposition:nth-of-type(20) { transform: translate(282px, 24px) rotateZ(6deg); } .birdposition:nth-of-type(20) .bird { -webkit-animation-duration: 6062ms; animation-duration: 6062ms; -webkit-animation-delay: -18302ms; animation-delay: -18302ms; } .birdposition:nth-of-type(20) .bird .wing { -webkit-animation-delay: -14329ms; animation-delay: -14329ms; } .birdposition:nth-of-type(21) { transform: translate(-213px, -118px) rotateZ(15deg); } .birdposition:nth-of-type(21) .bird { -webkit-animation-duration: 11343ms; animation-duration: 11343ms; -webkit-animation-delay: -839ms; animation-delay: -839ms; } .birdposition:nth-of-type(21) .bird .wing { -webkit-animation-delay: -16708ms; animation-delay: -16708ms; } .birdposition:nth-of-type(22) { transform: translate(112px, 1px) rotateZ(-10deg); } .birdposition:nth-of-type(22) .bird { -webkit-animation-duration: 7764ms; animation-duration: 7764ms; -webkit-animation-delay: -12412ms; animation-delay: -12412ms; } .birdposition:nth-of-type(22) .bird .wing { -webkit-animation-delay: -7349ms; animation-delay: -7349ms; } .birdposition:nth-of-type(23) { transform: translate(294px, 0px) rotateZ(10deg); } .birdposition:nth-of-type(23) .bird { -webkit-animation-duration: 5513ms; animation-duration: 5513ms; -webkit-animation-delay: -10799ms; animation-delay: -10799ms; } .birdposition:nth-of-type(23) .bird .wing { -webkit-animation-delay: -12668ms; animation-delay: -12668ms; } .birdposition:nth-of-type(24) { transform: translate(-293px, -107px) rotateZ(5deg); } .birdposition:nth-of-type(24) .bird { -webkit-animation-duration: 6153ms; animation-duration: 6153ms; -webkit-animation-delay: -2334ms; animation-delay: -2334ms; } .birdposition:nth-of-type(24) .bird .wing { -webkit-animation-delay: -7299ms; animation-delay: -7299ms; } .birdposition:nth-of-type(25) { transform: translate(75px, 49px) rotateZ(4deg); } .birdposition:nth-of-type(25) .bird { -webkit-animation-duration: 11372ms; animation-duration: 11372ms; -webkit-animation-delay: -12309ms; animation-delay: -12309ms; } .birdposition:nth-of-type(25) .bird .wing { -webkit-animation-delay: -5733ms; animation-delay: -5733ms; } .birdposition:nth-of-type(26) { transform: translate(211px, -6px) rotateZ(2deg); } .birdposition:nth-of-type(26) .bird { -webkit-animation-duration: 14169ms; animation-duration: 14169ms; -webkit-animation-delay: -9140ms; animation-delay: -9140ms; } .birdposition:nth-of-type(26) .bird .wing { -webkit-animation-delay: -10686ms; animation-delay: -10686ms; } .birdposition:nth-of-type(27) { transform: translate(210px, -127px) rotateZ(0deg); } .birdposition:nth-of-type(27) .bird { -webkit-animation-duration: 11472ms; animation-duration: 11472ms; -webkit-animation-delay: -3523ms; animation-delay: -3523ms; } .birdposition:nth-of-type(27) .bird .wing { -webkit-animation-delay: -11927ms; animation-delay: -11927ms; } .birdposition:nth-of-type(28) { transform: translate(96px, -94px) rotateZ(7deg); } .birdposition:nth-of-type(28) .bird { -webkit-animation-duration: 13625ms; animation-duration: 13625ms; -webkit-animation-delay: -16296ms; animation-delay: -16296ms; } .birdposition:nth-of-type(28) .bird .wing { -webkit-animation-delay: -8692ms; animation-delay: -8692ms; } .birdposition:nth-of-type(29) { transform: translate(296px, -116px) rotateZ(1deg); } .birdposition:nth-of-type(29) .bird { -webkit-animation-duration: 7291ms; animation-duration: 7291ms; -webkit-animation-delay: -512ms; animation-delay: -512ms; } .birdposition:nth-of-type(29) .bird .wing { -webkit-animation-delay: -15505ms; animation-delay: -15505ms; } .birdposition:nth-of-type(30) { transform: translate(-155px, 20px) rotateZ(-2deg); } .birdposition:nth-of-type(30) .bird { -webkit-animation-duration: 5607ms; animation-duration: 5607ms; -webkit-animation-delay: -7383ms; animation-delay: -7383ms; } .birdposition:nth-of-type(30) .bird .wing { -webkit-animation-delay: -7387ms; animation-delay: -7387ms; } .birdposition:nth-of-type(31) { transform: translate(-88px, -110px) rotateZ(10deg); } .birdposition:nth-of-type(31) .bird { -webkit-animation-duration: 5885ms; animation-duration: 5885ms; -webkit-animation-delay: -6911ms; animation-delay: -6911ms; } .birdposition:nth-of-type(31) .bird .wing { -webkit-animation-delay: -14921ms; animation-delay: -14921ms; } .birdposition:nth-of-type(32) { transform: translate(61px, -122px) rotateZ(-4deg); } .birdposition:nth-of-type(32) .bird { -webkit-animation-duration: 12765ms; animation-duration: 12765ms; -webkit-animation-delay: -11473ms; animation-delay: -11473ms; } .birdposition:nth-of-type(32) .bird .wing { -webkit-animation-delay: -14019ms; animation-delay: -14019ms; } .birdposition:nth-of-type(33) { transform: translate(-196px, -54px) rotateZ(-18deg); } .birdposition:nth-of-type(33) .bird { -webkit-animation-duration: 6856ms; animation-duration: 6856ms; -webkit-animation-delay: -13938ms; animation-delay: -13938ms; } .birdposition:nth-of-type(33) .bird .wing { -webkit-animation-delay: -11594ms; animation-delay: -11594ms; } .birdposition:nth-of-type(34) { transform: translate(-41px, -148px) rotateZ(13deg); } .birdposition:nth-of-type(34) .bird { -webkit-animation-duration: 8176ms; animation-duration: 8176ms; -webkit-animation-delay: -195ms; animation-delay: -195ms; } .birdposition:nth-of-type(34) .bird .wing { -webkit-animation-delay: -11477ms; animation-delay: -11477ms; } .birdposition:nth-of-type(35) { transform: translate(62px, -4px) rotateZ(-2deg); } .birdposition:nth-of-type(35) .bird { -webkit-animation-duration: 5482ms; animation-duration: 5482ms; -webkit-animation-delay: -2788ms; animation-delay: -2788ms; } .birdposition:nth-of-type(35) .bird .wing { -webkit-animation-delay: -13749ms; animation-delay: -13749ms; } .birdposition:nth-of-type(36) { transform: translate(299px, -34px) rotateZ(3deg); } .birdposition:nth-of-type(36) .bird { -webkit-animation-duration: 11905ms; animation-duration: 11905ms; -webkit-animation-delay: -7415ms; animation-delay: -7415ms; } .birdposition:nth-of-type(36) .bird .wing { -webkit-animation-delay: -8496ms; animation-delay: -8496ms; } .birdposition:nth-of-type(37) { transform: translate(-73px, 28px) rotateZ(-18deg); } .birdposition:nth-of-type(37) .bird { -webkit-animation-duration: 7742ms; animation-duration: 7742ms; -webkit-animation-delay: -15863ms; animation-delay: -15863ms; } .birdposition:nth-of-type(37) .bird .wing { -webkit-animation-delay: -2484ms; animation-delay: -2484ms; } .birdposition:nth-of-type(38) { transform: translate(-153px, -131px) rotateZ(10deg); } .birdposition:nth-of-type(38) .bird { -webkit-animation-duration: 11207ms; animation-duration: 11207ms; -webkit-animation-delay: -16052ms; animation-delay: -16052ms; } .birdposition:nth-of-type(38) .bird .wing { -webkit-animation-delay: -1370ms; animation-delay: -1370ms; } .birdposition:nth-of-type(39) { transform: translate(138px, -42px) rotateZ(3deg); } .birdposition:nth-of-type(39) .bird { -webkit-animation-duration: 14462ms; animation-duration: 14462ms; -webkit-animation-delay: -4518ms; animation-delay: -4518ms; } .birdposition:nth-of-type(39) .bird .wing { -webkit-animation-delay: -11643ms; animation-delay: -11643ms; } .birdposition:nth-of-type(40) { transform: translate(-191px, -2px) rotateZ(-1deg); } .birdposition:nth-of-type(40) .bird { -webkit-animation-duration: 14140ms; animation-duration: 14140ms; -webkit-animation-delay: -11822ms; animation-delay: -11822ms; } .birdposition:nth-of-type(40) .bird .wing { -webkit-animation-delay: -4569ms; animation-delay: -4569ms; } .birdposition:nth-of-type(41) { transform: translate(-130px, -60px) rotateZ(-3deg); } .birdposition:nth-of-type(41) .bird { -webkit-animation-duration: 5149ms; animation-duration: 5149ms; -webkit-animation-delay: -12733ms; animation-delay: -12733ms; } .birdposition:nth-of-type(41) .bird .wing { -webkit-animation-delay: -9163ms; animation-delay: -9163ms; } .birdposition:nth-of-type(42) { transform: translate(-220px, 20px) rotateZ(6deg); } .birdposition:nth-of-type(42) .bird { -webkit-animation-duration: 7050ms; animation-duration: 7050ms; -webkit-animation-delay: -4591ms; animation-delay: -4591ms; } .birdposition:nth-of-type(42) .bird .wing { -webkit-animation-delay: -18088ms; animation-delay: -18088ms; } .birdposition:nth-of-type(43) { transform: translate(284px, 20px) rotateZ(-4deg); } .birdposition:nth-of-type(43) .bird { -webkit-animation-duration: 5548ms; animation-duration: 5548ms; -webkit-animation-delay: -7535ms; animation-delay: -7535ms; } .birdposition:nth-of-type(43) .bird .wing { -webkit-animation-delay: -18381ms; animation-delay: -18381ms; } .birdposition:nth-of-type(44) { transform: translate(-161px, -11px) rotateZ(-1deg); } .birdposition:nth-of-type(44) .bird { -webkit-animation-duration: 7907ms; animation-duration: 7907ms; -webkit-animation-delay: -258ms; animation-delay: -258ms; } .birdposition:nth-of-type(44) .bird .wing { -webkit-animation-delay: -19705ms; animation-delay: -19705ms; } .birdposition:nth-of-type(45) { transform: translate(-166px, -35px) rotateZ(-18deg); } .birdposition:nth-of-type(45) .bird { -webkit-animation-duration: 12431ms; animation-duration: 12431ms; -webkit-animation-delay: -14822ms; animation-delay: -14822ms; } .birdposition:nth-of-type(45) .bird .wing { -webkit-animation-delay: -13446ms; animation-delay: -13446ms; } .birdposition:nth-of-type(46) { transform: translate(105px, 31px) rotateZ(3deg); } .birdposition:nth-of-type(46) .bird { -webkit-animation-duration: 11816ms; animation-duration: 11816ms; -webkit-animation-delay: -5704ms; animation-delay: -5704ms; } .birdposition:nth-of-type(46) .bird .wing { -webkit-animation-delay: -10269ms; animation-delay: -10269ms; } .birdposition:nth-of-type(47) { transform: translate(-129px, -44px) rotateZ(15deg); } .birdposition:nth-of-type(47) .bird { -webkit-animation-duration: 13461ms; animation-duration: 13461ms; -webkit-animation-delay: -11179ms; animation-delay: -11179ms; } .birdposition:nth-of-type(47) .bird .wing { -webkit-animation-delay: -16511ms; animation-delay: -16511ms; } .birdposition:nth-of-type(48) { transform: translate(19px, 7px) rotateZ(16deg); } .birdposition:nth-of-type(48) .bird { -webkit-animation-duration: 14627ms; animation-duration: 14627ms; -webkit-animation-delay: -1727ms; animation-delay: -1727ms; } .birdposition:nth-of-type(48) .bird .wing { -webkit-animation-delay: -15814ms; animation-delay: -15814ms; } .birdposition:nth-of-type(49) { transform: translate(-241px, 34px) rotateZ(-4deg); } .birdposition:nth-of-type(49) .bird { -webkit-animation-duration: 5497ms; animation-duration: 5497ms; -webkit-animation-delay: -7086ms; animation-delay: -7086ms; } .birdposition:nth-of-type(49) .bird .wing { -webkit-animation-delay: -7791ms; animation-delay: -7791ms; } .birdposition:nth-of-type(50) { transform: translate(-221px, -139px) rotateZ(-18deg); } .birdposition:nth-of-type(50) .bird { -webkit-animation-duration: 13163ms; animation-duration: 13163ms; -webkit-animation-delay: -2206ms; animation-delay: -2206ms; } .birdposition:nth-of-type(50) .bird .wing { -webkit-animation-delay: -3062ms; animation-delay: -3062ms; } .birdposition:nth-of-type(51) { transform: translate(-58px, 2px) rotateZ(14deg); } .birdposition:nth-of-type(51) .bird { -webkit-animation-duration: 14025ms; animation-duration: 14025ms; -webkit-animation-delay: -12903ms; animation-delay: -12903ms; } .birdposition:nth-of-type(51) .bird .wing { -webkit-animation-delay: -9675ms; animation-delay: -9675ms; } .birdposition:nth-of-type(52) { transform: translate(291px, -59px) rotateZ(-4deg); } .birdposition:nth-of-type(52) .bird { -webkit-animation-duration: 13765ms; animation-duration: 13765ms; -webkit-animation-delay: -1991ms; animation-delay: -1991ms; } .birdposition:nth-of-type(52) .bird .wing { -webkit-animation-delay: -16712ms; animation-delay: -16712ms; } .birdposition:nth-of-type(53) { transform: translate(221px, -51px) rotateZ(19deg); } .birdposition:nth-of-type(53) .bird { -webkit-animation-duration: 11378ms; animation-duration: 11378ms; -webkit-animation-delay: -1988ms; animation-delay: -1988ms; } .birdposition:nth-of-type(53) .bird .wing { -webkit-animation-delay: -10331ms; animation-delay: -10331ms; } .birdposition:nth-of-type(54) { transform: translate(-258px, -23px) rotateZ(-10deg); } .birdposition:nth-of-type(54) .bird { -webkit-animation-duration: 11498ms; animation-duration: 11498ms; -webkit-animation-delay: -18698ms; animation-delay: -18698ms; } .birdposition:nth-of-type(54) .bird .wing { -webkit-animation-delay: -16284ms; animation-delay: -16284ms; } .birdposition:nth-of-type(55) { transform: translate(-273px, -112px) rotateZ(-7deg); } .birdposition:nth-of-type(55) .bird { -webkit-animation-duration: 11728ms; animation-duration: 11728ms; -webkit-animation-delay: -1934ms; animation-delay: -1934ms; } .birdposition:nth-of-type(55) .bird .wing { -webkit-animation-delay: -19135ms; animation-delay: -19135ms; } .birdposition:nth-of-type(56) { transform: translate(75px, -55px) rotateZ(8deg); } .birdposition:nth-of-type(56) .bird { -webkit-animation-duration: 6588ms; animation-duration: 6588ms; -webkit-animation-delay: -17602ms; animation-delay: -17602ms; } .birdposition:nth-of-type(56) .bird .wing { -webkit-animation-delay: -8958ms; animation-delay: -8958ms; } .birdposition:nth-of-type(57) { transform: translate(32px, -32px) rotateZ(4deg); } .birdposition:nth-of-type(57) .bird { -webkit-animation-duration: 14819ms; animation-duration: 14819ms; -webkit-animation-delay: -17026ms; animation-delay: -17026ms; } .birdposition:nth-of-type(57) .bird .wing { -webkit-animation-delay: -10687ms; animation-delay: -10687ms; } .birdposition:nth-of-type(58) { transform: translate(-9px, 15px) rotateZ(10deg); } .birdposition:nth-of-type(58) .bird { -webkit-animation-duration: 5627ms; animation-duration: 5627ms; -webkit-animation-delay: -906ms; animation-delay: -906ms; } .birdposition:nth-of-type(58) .bird .wing { -webkit-animation-delay: -7783ms; animation-delay: -7783ms; } .birdposition:nth-of-type(59) { transform: translate(70px, -128px) rotateZ(-10deg); } .birdposition:nth-of-type(59) .bird { -webkit-animation-duration: 7361ms; animation-duration: 7361ms; -webkit-animation-delay: -11412ms; animation-delay: -11412ms; } .birdposition:nth-of-type(59) .bird .wing { -webkit-animation-delay: -12018ms; animation-delay: -12018ms; } .birdposition:nth-of-type(60) { transform: translate(58px, -140px) rotateZ(-12deg); } .birdposition:nth-of-type(60) .bird { -webkit-animation-duration: 13283ms; animation-duration: 13283ms; -webkit-animation-delay: -2049ms; animation-delay: -2049ms; } .birdposition:nth-of-type(60) .bird .wing { -webkit-animation-delay: -18296ms; animation-delay: -18296ms; } .birdposition:nth-of-type(61) { transform: translate(17px, -146px) rotateZ(3deg); } .birdposition:nth-of-type(61) .bird { -webkit-animation-duration: 9336ms; animation-duration: 9336ms; -webkit-animation-delay: -3148ms; animation-delay: -3148ms; } .birdposition:nth-of-type(61) .bird .wing { -webkit-animation-delay: -5560ms; animation-delay: -5560ms; } .birdposition:nth-of-type(62) { transform: translate(203px, 49px) rotateZ(17deg); } .birdposition:nth-of-type(62) .bird { -webkit-animation-duration: 13669ms; animation-duration: 13669ms; -webkit-animation-delay: -15100ms; animation-delay: -15100ms; } .birdposition:nth-of-type(62) .bird .wing { -webkit-animation-delay: -16379ms; animation-delay: -16379ms; } .birdposition:nth-of-type(63) { transform: translate(191px, 24px) rotateZ(-1deg); } .birdposition:nth-of-type(63) .bird { -webkit-animation-duration: 8577ms; animation-duration: 8577ms; -webkit-animation-delay: -11289ms; animation-delay: -11289ms; } .birdposition:nth-of-type(63) .bird .wing { -webkit-animation-delay: -11447ms; animation-delay: -11447ms; } .birdposition:nth-of-type(64) { transform: translate(204px, 49px) rotateZ(13deg); } .birdposition:nth-of-type(64) .bird { -webkit-animation-duration: 12061ms; animation-duration: 12061ms; -webkit-animation-delay: -19393ms; animation-delay: -19393ms; } .birdposition:nth-of-type(64) .bird .wing { -webkit-animation-delay: -409ms; animation-delay: -409ms; } .birdposition:nth-of-type(65) { transform: translate(161px, -29px) rotateZ(15deg); } .birdposition:nth-of-type(65) .bird { -webkit-animation-duration: 11728ms; animation-duration: 11728ms; -webkit-animation-delay: -11825ms; animation-delay: -11825ms; } .birdposition:nth-of-type(65) .bird .wing { -webkit-animation-delay: -4565ms; animation-delay: -4565ms; } .birdposition:nth-of-type(66) { transform: translate(-92px, -99px) rotateZ(11deg); } .birdposition:nth-of-type(66) .bird { -webkit-animation-duration: 11223ms; animation-duration: 11223ms; -webkit-animation-delay: -7504ms; animation-delay: -7504ms; } .birdposition:nth-of-type(66) .bird .wing { -webkit-animation-delay: -9232ms; animation-delay: -9232ms; } .birdposition:nth-of-type(67) { transform: translate(105px, -97px) rotateZ(10deg); } .birdposition:nth-of-type(67) .bird { -webkit-animation-duration: 9148ms; animation-duration: 9148ms; -webkit-animation-delay: -6376ms; animation-delay: -6376ms; } .birdposition:nth-of-type(67) .bird .wing { -webkit-animation-delay: -18742ms; animation-delay: -18742ms; } .birdposition:nth-of-type(68) { transform: translate(44px, 31px) rotateZ(-12deg); } .birdposition:nth-of-type(68) .bird { -webkit-animation-duration: 8752ms; animation-duration: 8752ms; -webkit-animation-delay: -5025ms; animation-delay: -5025ms; } .birdposition:nth-of-type(68) .bird .wing { -webkit-animation-delay: -2813ms; animation-delay: -2813ms; } .birdposition:nth-of-type(69) { transform: translate(144px, -122px) rotateZ(-13deg); } .birdposition:nth-of-type(69) .bird { -webkit-animation-duration: 7430ms; animation-duration: 7430ms; -webkit-animation-delay: -10597ms; animation-delay: -10597ms; } .birdposition:nth-of-type(69) .bird .wing { -webkit-animation-delay: -9091ms; animation-delay: -9091ms; } .birdposition:nth-of-type(70) { transform: translate(-206px, 5px) rotateZ(-19deg); } .birdposition:nth-of-type(70) .bird { -webkit-animation-duration: 12742ms; animation-duration: 12742ms; -webkit-animation-delay: -9569ms; animation-delay: -9569ms; } .birdposition:nth-of-type(70) .bird .wing { -webkit-animation-delay: -14694ms; animation-delay: -14694ms; } .birdposition:nth-of-type(71) { transform: translate(-281px, -92px) rotateZ(-1deg); } .birdposition:nth-of-type(71) .bird { -webkit-animation-duration: 7721ms; animation-duration: 7721ms; -webkit-animation-delay: -10640ms; animation-delay: -10640ms; } .birdposition:nth-of-type(71) .bird .wing { -webkit-animation-delay: -18709ms; animation-delay: -18709ms; } .birdposition:nth-of-type(72) { transform: translate(-287px, -116px) rotateZ(-7deg); } .birdposition:nth-of-type(72) .bird { -webkit-animation-duration: 7349ms; animation-duration: 7349ms; -webkit-animation-delay: -17206ms; animation-delay: -17206ms; } .birdposition:nth-of-type(72) .bird .wing { -webkit-animation-delay: -3597ms; animation-delay: -3597ms; } .birdposition:nth-of-type(73) { transform: translate(197px, -49px) rotateZ(8deg); } .birdposition:nth-of-type(73) .bird { -webkit-animation-duration: 5825ms; animation-duration: 5825ms; -webkit-animation-delay: -13847ms; animation-delay: -13847ms; } .birdposition:nth-of-type(73) .bird .wing { -webkit-animation-delay: -9492ms; animation-delay: -9492ms; } .birdposition:nth-of-type(74) { transform: translate(83px, 48px) rotateZ(-15deg); } .birdposition:nth-of-type(74) .bird { -webkit-animation-duration: 5546ms; animation-duration: 5546ms; -webkit-animation-delay: -8404ms; animation-delay: -8404ms; } .birdposition:nth-of-type(74) .bird .wing { -webkit-animation-delay: -6652ms; animation-delay: -6652ms; } .birdposition:nth-of-type(75) { transform: translate(-154px, -60px) rotateZ(-2deg); } .birdposition:nth-of-type(75) .bird { -webkit-animation-duration: 5467ms; animation-duration: 5467ms; -webkit-animation-delay: -4222ms; animation-delay: -4222ms; } .birdposition:nth-of-type(75) .bird .wing { -webkit-animation-delay: -5216ms; animation-delay: -5216ms; } .birdposition:nth-of-type(76) { transform: translate(-282px, -122px) rotateZ(20deg); } .birdposition:nth-of-type(76) .bird { -webkit-animation-duration: 13467ms; animation-duration: 13467ms; -webkit-animation-delay: -6803ms; animation-delay: -6803ms; } .birdposition:nth-of-type(76) .bird .wing { -webkit-animation-delay: -17712ms; animation-delay: -17712ms; } .birdposition:nth-of-type(77) { transform: translate(-247px, -125px) rotateZ(10deg); } .birdposition:nth-of-type(77) .bird { -webkit-animation-duration: 11370ms; animation-duration: 11370ms; -webkit-animation-delay: -18273ms; animation-delay: -18273ms; } .birdposition:nth-of-type(77) .bird .wing { -webkit-animation-delay: -3949ms; animation-delay: -3949ms; } .birdposition:nth-of-type(78) { transform: translate(64px, -60px) rotateZ(-15deg); } .birdposition:nth-of-type(78) .bird { -webkit-animation-duration: 12613ms; animation-duration: 12613ms; -webkit-animation-delay: -18187ms; animation-delay: -18187ms; } .birdposition:nth-of-type(78) .bird .wing { -webkit-animation-delay: -9401ms; animation-delay: -9401ms; } .birdposition:nth-of-type(79) { transform: translate(-216px, -13px) rotateZ(-18deg); } .birdposition:nth-of-type(79) .bird { -webkit-animation-duration: 14338ms; animation-duration: 14338ms; -webkit-animation-delay: -8210ms; animation-delay: -8210ms; } .birdposition:nth-of-type(79) .bird .wing { -webkit-animation-delay: -11775ms; animation-delay: -11775ms; } .birdposition:nth-of-type(80) { transform: translate(-44px, -4px) rotateZ(0deg); } .birdposition:nth-of-type(80) .bird { -webkit-animation-duration: 11194ms; animation-duration: 11194ms; -webkit-animation-delay: -2329ms; animation-delay: -2329ms; } .birdposition:nth-of-type(80) .bird .wing { -webkit-animation-delay: -5796ms; animation-delay: -5796ms; } .birdposition:nth-of-type(81) { transform: translate(14px, -106px) rotateZ(-4deg); } .birdposition:nth-of-type(81) .bird { -webkit-animation-duration: 13183ms; animation-duration: 13183ms; -webkit-animation-delay: -3376ms; animation-delay: -3376ms; } .birdposition:nth-of-type(81) .bird .wing { -webkit-animation-delay: -19858ms; animation-delay: -19858ms; } .birdposition:nth-of-type(82) { transform: translate(-47px, -88px) rotateZ(16deg); } .birdposition:nth-of-type(82) .bird { -webkit-animation-duration: 7440ms; animation-duration: 7440ms; -webkit-animation-delay: -311ms; animation-delay: -311ms; } .birdposition:nth-of-type(82) .bird .wing { -webkit-animation-delay: -391ms; animation-delay: -391ms; } .birdposition:nth-of-type(83) { transform: translate(145px, -56px) rotateZ(-14deg); } .birdposition:nth-of-type(83) .bird { -webkit-animation-duration: 13867ms; animation-duration: 13867ms; -webkit-animation-delay: -13613ms; animation-delay: -13613ms; } .birdposition:nth-of-type(83) .bird .wing { -webkit-animation-delay: -19107ms; animation-delay: -19107ms; } .birdposition:nth-of-type(84) { transform: translate(-68px, 32px) rotateZ(6deg); } .birdposition:nth-of-type(84) .bird { -webkit-animation-duration: 12049ms; animation-duration: 12049ms; -webkit-animation-delay: -11231ms; animation-delay: -11231ms; } .birdposition:nth-of-type(84) .bird .wing { -webkit-animation-delay: -3271ms; animation-delay: -3271ms; } .birdposition:nth-of-type(85) { transform: translate(-126px, -92px) rotateZ(-19deg); } .birdposition:nth-of-type(85) .bird { -webkit-animation-duration: 13515ms; animation-duration: 13515ms; -webkit-animation-delay: -7487ms; animation-delay: -7487ms; } .birdposition:nth-of-type(85) .bird .wing { -webkit-animation-delay: -16710ms; animation-delay: -16710ms; } .birdposition:nth-of-type(86) { transform: translate(8px, 16px) rotateZ(-11deg); } .birdposition:nth-of-type(86) .bird { -webkit-animation-duration: 12554ms; animation-duration: 12554ms; -webkit-animation-delay: -10513ms; animation-delay: -10513ms; } .birdposition:nth-of-type(86) .bird .wing { -webkit-animation-delay: -5255ms; animation-delay: -5255ms; } .birdposition:nth-of-type(87) { transform: translate(285px, -28px) rotateZ(-15deg); } .birdposition:nth-of-type(87) .bird { -webkit-animation-duration: 8833ms; animation-duration: 8833ms; -webkit-animation-delay: -15403ms; animation-delay: -15403ms; } .birdposition:nth-of-type(87) .bird .wing { -webkit-animation-delay: -11577ms; animation-delay: -11577ms; } .birdposition:nth-of-type(88) { transform: translate(140px, -37px) rotateZ(16deg); } .birdposition:nth-of-type(88) .bird { -webkit-animation-duration: 13762ms; animation-duration: 13762ms; -webkit-animation-delay: -2795ms; animation-delay: -2795ms; } .birdposition:nth-of-type(88) .bird .wing { -webkit-animation-delay: -13559ms; animation-delay: -13559ms; } .birdposition:nth-of-type(89) { transform: translate(185px, -61px) rotateZ(11deg); } .birdposition:nth-of-type(89) .bird { -webkit-animation-duration: 7133ms; animation-duration: 7133ms; -webkit-animation-delay: -14026ms; animation-delay: -14026ms; } .birdposition:nth-of-type(89) .bird .wing { -webkit-animation-delay: -19064ms; animation-delay: -19064ms; } .birdposition:nth-of-type(90) { transform: translate(67px, 5px) rotateZ(-14deg); } .birdposition:nth-of-type(90) .bird { -webkit-animation-duration: 11305ms; animation-duration: 11305ms; -webkit-animation-delay: -17026ms; animation-delay: -17026ms; } .birdposition:nth-of-type(90) .bird .wing { -webkit-animation-delay: -10947ms; animation-delay: -10947ms; } .birdposition:nth-of-type(91) { transform: translate(114px, -79px) rotateZ(-3deg); } .birdposition:nth-of-type(91) .bird { -webkit-animation-duration: 13120ms; animation-duration: 13120ms; -webkit-animation-delay: -16749ms; animation-delay: -16749ms; } .birdposition:nth-of-type(91) .bird .wing { -webkit-animation-delay: -16859ms; animation-delay: -16859ms; } .birdposition:nth-of-type(92) { transform: translate(-182px, -96px) rotateZ(-13deg); } .birdposition:nth-of-type(92) .bird { -webkit-animation-duration: 13685ms; animation-duration: 13685ms; -webkit-animation-delay: -601ms; animation-delay: -601ms; } .birdposition:nth-of-type(92) .bird .wing { -webkit-animation-delay: -6959ms; animation-delay: -6959ms; } .birdposition:nth-of-type(93) { transform: translate(-169px, -24px) rotateZ(-1deg); } .birdposition:nth-of-type(93) .bird { -webkit-animation-duration: 11931ms; animation-duration: 11931ms; -webkit-animation-delay: -5343ms; animation-delay: -5343ms; } .birdposition:nth-of-type(93) .bird .wing { -webkit-animation-delay: -9661ms; animation-delay: -9661ms; } .birdposition:nth-of-type(94) { transform: translate(-246px, 12px) rotateZ(-3deg); } .birdposition:nth-of-type(94) .bird { -webkit-animation-duration: 12079ms; animation-duration: 12079ms; -webkit-animation-delay: -1310ms; animation-delay: -1310ms; } .birdposition:nth-of-type(94) .bird .wing { -webkit-animation-delay: -3055ms; animation-delay: -3055ms; } .birdposition:nth-of-type(95) { transform: translate(13px, -117px) rotateZ(20deg); } .birdposition:nth-of-type(95) .bird { -webkit-animation-duration: 5036ms; animation-duration: 5036ms; -webkit-animation-delay: -1451ms; animation-delay: -1451ms; } .birdposition:nth-of-type(95) .bird .wing { -webkit-animation-delay: -8458ms; animation-delay: -8458ms; } .birdposition:nth-of-type(96) { transform: translate(239px, -38px) rotateZ(18deg); } .birdposition:nth-of-type(96) .bird { -webkit-animation-duration: 7625ms; animation-duration: 7625ms; -webkit-animation-delay: -13781ms; animation-delay: -13781ms; } .birdposition:nth-of-type(96) .bird .wing { -webkit-animation-delay: -19791ms; animation-delay: -19791ms; } .birdposition:nth-of-type(97) { transform: translate(30px, -113px) rotateZ(-1deg); } .birdposition:nth-of-type(97) .bird { -webkit-animation-duration: 11417ms; animation-duration: 11417ms; -webkit-animation-delay: -19334ms; animation-delay: -19334ms; } .birdposition:nth-of-type(97) .bird .wing { -webkit-animation-delay: -14886ms; animation-delay: -14886ms; } .birdposition:nth-of-type(98) { transform: translate(-238px, 41px) rotateZ(9deg); } .birdposition:nth-of-type(98) .bird { -webkit-animation-duration: 6740ms; animation-duration: 6740ms; -webkit-animation-delay: -6955ms; animation-delay: -6955ms; } .birdposition:nth-of-type(98) .bird .wing { -webkit-animation-delay: -2362ms; animation-delay: -2362ms; } .birdposition:nth-of-type(99) { transform: translate(189px, -114px) rotateZ(9deg); } .birdposition:nth-of-type(99) .bird { -webkit-animation-duration: 6347ms; animation-duration: 6347ms; -webkit-animation-delay: -11020ms; animation-delay: -11020ms; } .birdposition:nth-of-type(99) .bird .wing { -webkit-animation-delay: -8693ms; animation-delay: -8693ms; } .birdposition:nth-of-type(100) { transform: translate(21px, -4px) rotateZ(-1deg); } .birdposition:nth-of-type(100) .bird { -webkit-animation-duration: 8942ms; animation-duration: 8942ms; -webkit-animation-delay: -15599ms; animation-delay: -15599ms; } .birdposition:nth-of-type(100) .bird .wing { -webkit-animation-delay: -3503ms; animation-delay: -3503ms; } .bird { position: absolute; width: 80px; -webkit-animation: fly 8s linear infinite; animation: fly 8s linear infinite; } .bird .wing { position: absolute; width: 50%; height: 20px; border-top: 4px solid black; border-radius: 100%; } .bird .wing.-left { transform-origin: 100% 50%; -webkit-animation: wingLeft 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: wingLeft 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } .bird .wing.-right { right: 0; transform-origin: 0 50%; -webkit-animation: wingRight 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; animation: wingRight 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } @-webkit-keyframes fly { 0% { opacity: 0; transform: translateZ(500px); } 20% { opacity: 1; transform: translateZ(400px); } 100% { transform: translateZ(0px) scale(0); } } @keyframes fly { 0% { opacity: 0; transform: translateZ(500px); } 20% { opacity: 1; transform: translateZ(400px); } 100% { transform: translateZ(0px) scale(0); } } @-webkit-keyframes wingLeft { 0% { transform: rotateZ(30deg); } 100% { transform: rotateZ(-20deg); } } @keyframes wingLeft { 0% { transform: rotateZ(30deg); } 100% { transform: rotateZ(-20deg); } } @-webkit-keyframes wingRight { 0% { transform: rotateZ(-30deg); } 100% { transform: rotateZ(20deg); } } @keyframes wingRight { 0% { transform: rotateZ(-30deg); } 100% { transform: rotateZ(20deg); } } </style>

REALIZADO POR:  Yusuke Nakaya

ORIGEN DE LA ENTRADA: https://codepen.io/YusukeNakaya/pen/oNNLeyv