近日，很多瀏覽器按鈕點擊會出現以下衝擊波效果，出於好奇，參考網上的資料，將這個效果研究實現下。
實現思路：
觀察波由小變大，涉及的css3屬性變化有width,height,left,top,opacity,首先通過偽類實現衝擊波層，同時需要設定衝擊波前後的中心點位置（這裡涉及一點點數學知識:畫圖計算兩個點的位置),最後設定transition-duration: 0實現瞬間變化，ps學習到用a:active可以類比滑鼠實現點擊的效果
簡單畫（很菜）：
實現的代碼：
<html> <head> <meta charset="UTF-8"> <title>實現衝擊波--數學知識很重要</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } html,body{ font-family:"微軟雅黑"; } .wave{ position:relative; float:left; width:50%; height:420px; } .wave a{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:inline-block; width:120px; height:50px; /*margin-left:-60px; margin-top:-25px;*/ line-height:50px; text-align:center; border-radius:5px; color:#fff; font-size:16px; cursor:pointer; /*overflow:hidden;*/ } #wave1{ background-color:#00BFFF; } #wave2{ background-color:#009955; } #wave1 a{ background-color:burlywood; } #wave2 a{/*寬度不確定長度*/ width:50%; height:50px; background-color:cadetblue; } .wave a:after{ /*畫圖 ，假設left:0;top:0然後畫出兩個中心點的水平和垂直距離*/ content: ""; display: block; position: absolute; left: -40px; top: -75px; width: 200px; height: 200px; background: rgba(255,255,255,0.8); border-radius: 50%; opacity:0; transition: all 1s; } .wave a:active:after{ /*位於中間即是a的中點*/ width: 0; height: 0; left:60px; top: 25px; opacity: 1; transition-duration: 0s; } #wave2 a:after{ left:50%; top:50%; transform:translate(-50%,-50%); } #wave2 a:active:after{ left:50%; top:50%; transform:translate(-50%,-50%); } </style> </head> <body> <!--實現衝擊波按鈕確定長度--> <p class="wave" id="wave1"> <a>點我</a> </p> <!--實現衝擊波按鈕不確定長度時--> <p class="wave" id="wave2"> <a>點我哈哈</a> </p> </body> </html>
實現的效果：
github代碼：實現衝擊波代碼
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
怎麼用CSS設定記錄使用者密碼
配置H5的捲軸樣式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
