CSS球形水波是一種很有趣的設(shè)計，可以輕松實現(xiàn)，效果也非常炫酷。下面我們就來一起看看如何制作CSS球形水波效果。

/* 先定義容器 */
/* CSS樣式 */
.container {
width: 200px; 
height: 200px; 
position: relative; 
border-radius: 50%; 
background-color: #gray;
}
/* 球體上添加水波效果 */
.container:before {
content: ""; 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0; 
left: 0; 
z-index: -1; 
border-radius: inherit; 
background-image: radial-gradient(circle, white 20%, transparent 10%), radial-gradient(circle, white 20%, transparent 10%), radial-gradient(circle, white 20%, transparent 10%), radial-gradient(circle, white 20%, transparent 10%), radial-gradient(circle, white 20%, transparent 10%), radial-gradient(circle, white 20%, transparent 10%);
background-position: center center;
background-repeat: no-repeat;
transform: translateZ(-25px);
animation: wave 12s linear infinite;
}
/* 定義動畫 */
@keyframes wave {
0% {
background-position: center 0;
}
100% {
background-position: center 50%;
}
}

以上代碼就是CSS球形水波效果的實現(xiàn)方式，其中容器使用border-radius屬性定義為50%可以讓正方形容器變成圓形，before偽元素使用radial-gradient(bgimg, bgimg...)定義了多個漸變背景，再配合animation動畫的background-position可實現(xiàn)波動效果，整個效果非常炫酷。