CSS 물결 애니메이션

CSS Waves

See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.

 

CSS 만으로 파도가 출렁이는 것처럼 블로그를 꾸밀 수 있습니다. 

 

<!--Waves Container-->
<div>
    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
        </defs>
        <g class="parallax">
            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"/>
            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"/>
            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"/>
            <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"/>
        </g>
    </svg>
</div>
<!--Waves end-->

HTML에 실적 적용할 코드는 <!--Waves Container--> 컨테이너 부분입니다.

 

 

<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"/>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"/>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"/>
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"/>

파도 물결의 색상을 변경하고자 할 때는 아래서부터  원색을 적용하고 아래서 2번째부터 투명도를 높여 변경으로 하면 됩니다.

 

.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}
/* Animation */
.parallax > use {
    animation: move-forever 25s cubic-bezier(0.55,.5,0.45,.5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}
/*Shrinking for mobile*/
@media(max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }
}

실제로 적용할 CSS도 이정도 이며,다른 코드들은 Wave 효과에 거의 영향을 주지 않습니다.

 

티스토리 메타 태그 쉽게 적용하기

티스토리 메뉴 현재 위치 표시