效果如圖所示：
主要是通過(guò)css3的:after偽類(lèi)和過(guò)渡屬性transition來(lái)進(jìn)行控制。先制作一個(gè)圓形沖擊波層，當(dāng)激活按鈕的時(shí)候讓沖擊波層瞬間變成0，釋放后從0過(guò)渡到最大范圍，從而形成沖擊波效果；以下是實(shí)現(xiàn)步驟：
1、先準(zhǔn)備基礎(chǔ)結(jié)構(gòu)和樣式；
/* 基礎(chǔ)樣式 */
*{padding:0; margin:0; border:0; list-style:none;}
body{ background: #000;}
a{ color: #fff; text-decoration: none; display: block; width: 100px; height: 40px; border-radius: 5px;
background: rgba(31,91,147,0.8); text-align: center; line-height: 40px; transition: all .4s;}
a:hover{ background: rgba(31,91,147,1);}
.all{ overflow: hidden;}
.btn{ float: left; margin: 40px; position: relative; overflow: hidden; }
2、通過(guò)偽類(lèi):after 給a添加一個(gè)沖擊波層，特殊的地方在于為了保證讓沖擊波效果從中間擴(kuò)散，需要設(shè)置層的位置位于中間；
/* 通過(guò)偽類(lèi)給按鈕添加一個(gè)沖擊波層 */
.btn a:after {
content: "";
display: block;
position: absolute;
left: -50px;
top: -80px; /* 設(shè)置沖擊波層位置在中間 */
width: 200px;
height: 200px; /* 設(shè)置沖擊波層的尺寸 */
background: rgba(255,255,255,0.6);
border-radius: 50%;
opacity: 0;
transition: all 1s;
}
3、添加激活按鈕的效果，通過(guò):active 給:after 設(shè)置瞬間過(guò)渡效果，這一步特殊的地方在于需要將過(guò)渡時(shí)間設(shè)置為0，讓沖擊波圖層瞬間為0，釋放開(kāi)的時(shí)候從0過(guò)渡到最大范圍；激活效果的不同位置可以形成不同的交互效果；可以自行測(cè)試；
/* 設(shè)置激活按鈕的效果，重點(diǎn)是后面的過(guò)渡時(shí)間； */
.btn a:active:after {
width: 0;
height: 0;
left: 50px;
top: 20px; /*設(shè)置激活時(shí)沖擊波層的位置在中間，保證是從中間擴(kuò)散，不同位置有不同效果 */
opacity: 1;
transition-duration: 0s; /* 激活的時(shí)候過(guò)渡時(shí)間0s瞬間沖擊波圖層變成0，釋放后過(guò)渡到上面.btn a:after的樣式 */
}
總結(jié)：交互效果的實(shí)現(xiàn)是利用了偽類(lèi)，:after作用非常強(qiáng)大，這只是它其中的一種效果，除此之外，還能實(shí)現(xiàn)更加強(qiáng)大的交互效果。
文章均為思樂(lè)科技專注網(wǎng)站建設(shè)，成都網(wǎng)站建設(shè)的成都網(wǎng)站建設(shè)公司原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)自http://m.klfwq.com/news/xinshoujianzhan/20161024/75581.html