隨著CSS3技術(shù)的發(fā)展，越來越多的動(dòng)畫效果可以用純CSS實(shí)現(xiàn)。其中一種炫酷的效果就是波紋動(dòng)畫。本文將分享如何使用CSS3實(shí)現(xiàn)波紋動(dòng)畫效果。

//html部分
<div class="ripple">點(diǎn)擊我</div>
//CSS部分
.ripple {
position: relative;
display: inline-block;
padding: 1rem 2rem;
border-radius: 2rem;
color: #fff;
background-color: #f00;
text-align: center;
cursor: pointer;
overflow: hidden;
}
.ripple:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2rem;
height: 2rem;
border-radius: 50%;
opacity: 0;
background-color: rgba(255, 255, 255, 0.5);
animation: ripple 0.6s linear;
}
@keyframes ripple {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(10);
opacity: 0;
}
}

以上就是實(shí)現(xiàn)波紋動(dòng)畫的核心代碼。首先，在HTML中添加一個(gè)帶ripple類名的div元素。接下來在CSS中設(shè)置元素的基本樣式，包括位置、顏色等。緊接著，在div元素中添加一個(gè):before偽元素來實(shí)現(xiàn)波紋效果，設(shè)定它的屬性包括透明度、寬高、背景顏色等等。最后，使用CSS3的animation屬性實(shí)現(xiàn)動(dòng)畫效果。

值得注意的是，波紋動(dòng)畫的實(shí)現(xiàn)還需要一些特殊的設(shè)置。首先，將div元素的overflow屬性設(shè)定為hidden，使得波紋效果只在元素內(nèi)部可見。其次，在:before偽元素中使用了transform屬性來實(shí)現(xiàn)居中對(duì)齊。最后，需要在animation屬性中設(shè)置動(dòng)畫的執(zhí)行時(shí)間以及緩動(dòng)函數(shù)。

到此，使用CSS3實(shí)現(xiàn)波紋動(dòng)畫效果的代碼就完成了。可以根據(jù)需求來調(diào)整元素的基本樣式及動(dòng)畫屬性，實(shí)現(xiàn)不同種類的波紋動(dòng)畫效果，令頁面更加炫酷動(dòng)感。