[CSS / SVG] 파도 효과

미리보기

Style

<style type="text/css">
    .event_wrap {overflow: hidden; position:relative;margin:0 auto; max-width: 800px; width: 100%; height: 300px; background: #000;}
    .wave_box{position: relative; display: block; margin: auto; width: 100%; height: 100%;}
    .wave{
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='157'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3E%3Cstop stop-color='%23ffffff' stop-opacity='1' offset='0%25'/%3E%3Cstop stop-color='%23ffffff' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 80C311 80 409.898-.25 811 0c400 0 500 80 789 80v77H0s.005-48 .005-77z' transform='matrix(-1 0 0 1 1600 0)'/%3E%3C/svg%3E") repeat-x;
        position: absolute;
        bottom: 0;
        width: 6400px;
        height: 157px;
        animation: wave 3s cubic-bezier(0.36,0.45,0.63,0.53) infinite;
        transform: translate3d(0,0,0);
    }
    @keyframes wave{0% {margin-left: -1600px;}100% {margin-left:0px;}}
</style>

 

HTML

<div class="event_wrap">
    <div class="wave_box"><div class="wave"></div></div>
</div>

 

CSS Animation 효과

JavaScript없이 CSS만 사용하여 파도효과를 만들어보자

 

사용한 이미지는 SVG형식으로 이미지가 깨지지않고 용량이 적은게 장점

SVG란 스케일러블 벡터 그래픽스(Scalable Vector Graphics)의 약자로 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식을 말한다.

 

SVG파일은 부호화하여 적용 ( 부호화 링크 )

SVG를 적용하는 방법은 여러가지가 있는데 추 후 설명하도록 하겠습니다.

aimation, CSS, cubic-bezier, infinite, keyframes, SVG, Wave, 파도, 무한반복, 애니메이션, 에니메이션, 애니매이션, 에니매이션, 부호화