css3實現沖擊波效果的示例代碼

2024-07-11 08:58:53

字體：大中小

來源：轉載

供稿：網友

近日，很多瀏覽器按鈕點擊會出現以下沖擊波效果，出于好奇，參考網上的資料，將這個效果研究實現下。

實現思路：

觀察波由小變大，涉及的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>  <!--實現沖擊波按鈕確定長度-->  <div class="wave" id="wave1">  <a>點我</a>  </div>  <!--實現沖擊波按鈕不確定長度時-->  <div class="wave" id="wave2">  <a>點我哈哈</a>  </div>  </body>  </html>

實現的效果：