html - Recurring waves shape using css -
i want ask way create repetitive wave on bottom of div using css, here's example of image enter image description here
html, body { height: 100%; } body { background:radial-gradient(ellipse @ center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #b7e8eb 100%); // background:#b7e8eb; overflow: hidden; } .ocean { height: 5%; width:100%; position:absolute; bottom:0; left:0; background: #015871; } .wave { background: url(http://tedmcdo.com/labs/wave.svg) repeat-x; position: absolute; top: -198px; width: 6400px; height: 198px; animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0); } .wave:nth-of-type(2) { top: -175px; animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite; opacity: 1; } @keyframes wave { 0% { margin-left: 0; } 100% { margin-left: -1600px; } } @keyframes swell { 0%, 100% { transform: translate3d(0,-25px,0); } 50% { transform: translate3d(0,5px,0); } } <div class="ocean"> <div class="wave"></div> </div>
Comments
Post a Comment