效果如圖所示：
主要是通過css3的:after偽類和過渡屬性transition來進行控制。先制作一個圓形沖擊波層，當激活按鈕的時候讓沖擊波層瞬間變成0，釋放后從0過渡到最大范圍，從而形成沖擊波效果；以下是實現(xiàn)步驟：
1、先準備基礎(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、通過偽類:after 給a添加一個沖擊波層，特殊的地方在于為了保證讓沖擊波效果從中間擴散，需要設(shè)置層的位置位于中間；
/* 通過偽類給按鈕添加一個沖擊波層 */
.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、添加激活按鈕的效果，通過:active 給:after 設(shè)置瞬間過渡效果，這一步特殊的地方在于需要將過渡時間設(shè)置為0，讓沖擊波圖層瞬間為0，釋放開的時候從0過渡到最大范圍；激活效果的不同位置可以形成不同的交互效果；可以自行測試；
/* 設(shè)置激活按鈕的效果，重點是后面的過渡時間； */
.btn a:active:after {
width: 0;
height: 0;
left: 50px;
top: 20px; /*設(shè)置激活時沖擊波層的位置在中間，保證是從中間擴散，不同位置有不同效果 */
opacity: 1;
transition-duration: 0s; /* 激活的時候過渡時間0s瞬間沖擊波圖層變成0，釋放后過渡到上面.btn a:after的樣式 */
}
總結(jié)：交互效果的實現(xiàn)是利用了偽類，:after作用非常強大，這只是它其中的一種效果，除此之外，還能實現(xiàn)更加強大的交互效果。
文章均為思樂科技專注網(wǎng)站建設(shè)，成都網(wǎng)站建設(shè)的成都網(wǎng)站建設(shè)公司原創(chuàng)，轉(zhuǎn)載請注明來自http://www.hcw208.com/news/xinshoujianzhan/20161024/75581.html