wave keyframes로 만들기

🌊 wave keyframes로 만들기

안녕하세요 TriplexLab입니다.

오늘은 css에서 animation사용해서 wave를 직접 만드는 것을 소개하겠습니다.

✍️ wave_custom 코드

@keyframes wave{0%{margin-left:0}100%{margin-left:-3056px}}
@keyframes swell{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-30px,0)}}

.inner .tit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ocean {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.ocean .wave{
    background-image: url("/img/wave.svg");
    background-repeat: repeat-x;
    background-size: contain;
    position: absolute;
    top: -170px;
    width: 6112px;
    height: 170px;
    transform: translate3d(0, 0, 0);
}

.ocean .wave.wave01 {
    animation: wave 26s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}
  
.ocean .wave.wave02 {
    top: -140px;
    background-position-x: 50%;
    animation: wave 38s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite, swell 5s ease -1.25s infinite;
    transform: translate3d(0, 0, 0);
}

이런 웨이브 에니메션 같은 경우는 
저의 결과 처럼 404 같은 찾을수 없다는 안내 페이지(404 Not Found) 만들때 사용하면 좋을것 같네요
그리고 로그인 하는 페이지에도 사용하면 좋을것 같네요😀

결과 👇👇

 

wave keyframes 결과