CSS 是網頁設計中必不可少的一部分。它可以控制網頁的外觀和布局。其中就包括背景顏色。這篇文章將介紹如何使用 CSS 實現一個水紋波動的背景顏色效果。

/* 定義背景顏色 */
body {
background-color: #62a6c1;
}
/* 定義水紋波動效果 */
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, #fff 10%, rgba(255, 255, 255, 0) 50%);
z-index: -1;
animation: pulse 2s infinite ease-in-out;
}
/* 定義水紋波動動畫 */
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(20);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}

代碼中定義了一個水紋波動的動畫效果，并將該效果應用于頁面的背景。通過不同的顏色和大小設置，可以定制出不同的水紋波動效果。

要使用該效果，只需在 CSS 文件中添加上述代碼，然后將其鏈接到網頁中即可。該效果兼容所有主流瀏覽器，并且不需要使用 JavaScript。

總之，CSS 是一個強大的工具，可以幫助我們實現各種美觀和實用的效果。水紋波動的背景顏色效果只是其中之一。掌握好 CSS 的使用，可以讓我們的網頁設計更加出色。