使用 CSS 與 SVG 製作波浪動畫

波浪動畫的特效一般提升網頁的美觀，這些特效一般都不需要與使用者進行互動，因此盡量不要使用到 JavaScript 為佳。簡單的特效盡量使用 CSS 製作，複雜的特效可能就不得不依賴 JavaScript 了。本文參考網路上找到的資料，展示兩種實現網頁波浪動畫的方法，並且這兩種方式皆未使用到 JavaScript。

方法一：CSS wave animation

可以先點擊下方連結看成果：

範例 1

            
                <div class="ocean">
                    <div class="wave"></div>
                    <div class="wave"></div>
                    <div class="wave"></div>
                </div>

            
                html, body {
                    background-color: #f2f2f2;
                }
                .ocean {
                    height: 80px;
                    width: 100%;
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
                    width: 100%;
                    overflow-x: hidden;
                }
                .wave {
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
                    position: absolute;
                    width: 200%;
                    height: 100%;
                    animation: wave 10s -3s linear infinite;
                    transform: translate3d(0, 0, 0);
                    opacity: 0.8;
                }
                .wave:nth-of-type(2) {
                    bottom: 0;
                    animation: wave 18s linear reverse infinite;
                    opacity: 0.5;
                }
                .wave:nth-of-type(3) {
                    bottom: 0;
                    animation: wave 20s -1s linear infinite;
                    opacity: 0.5;
                }
                @keyframes wave {
                    0% {
                        transform: translateX(0);
                    }
                    50% {
                        transform: translateX(-25%);
                    }
                    100% {
                        transform: translateX(-50%);
                    }
                }

方法二：Simple CSS Waves

可以先點擊下方連結看成果：

範例 2

            
                <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="#ffffff" />
                    </g>
                </svg>

            
                html, body {
                    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
                }
                .waves {
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
                    width: 100%;
                    height: 15vh;
                    margin-bottom: -7px;
                    min-height: 100px;
                    max-height: 150px;
                }
                .parallax > use {
                    animation: move-forever 25s cubic-bezier(.55, .5, .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);
                    }
                }
                @media (max-width: 768px) {
                    .waves {
                        height: 40px;
                        min-height: 40px;
                    }
                }