파도 css

<div class="wave"></div>
<style>
.wave {
    animation: wave 8s infinite linear;
    height: 300px;
    position: absolute; top: 757px; width: 100%; z-index: 0;
    background: url('../img/wave.svg') 0 0 repeat-x;
    background-size: 50%;
}

@keyframes wave {
    100% {background-position: -100% 0;}
}
</style>

시작과 끝점을 맞춘 svg 파일을 배경으로 두고 해당 배경이 있는 div를 animation으로 움직여서 파도치는 느낌을 낸다.
예시에는 wave 클래스만 줬지만 실 사용에는 wave 클래스를 감싼 div가 하나 더 필요.