在單擊按鈕上創建波紋效果
波紋效過是現代設計趨勢的一部分。你一定在許多網站上見到過，它提供了按鈕按下的波紋動畫效果。我們可以通過向按鈕添加子元素並設置動畫效果來產生漣漪效果。我們也可以使用Javascript根據光標在按鈕上的位置進行定位。
- 1、基本樣式
使用position:relative屬性向按鈕添加基本樣式，以放置內部span標籤並overflow:hidden防止span超出按鈕。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Button Ripple Effect - GFG
</title>
<style>
/* 默認按鈕樣式 */
.btn {
padding: 12px 50px;
border: none;
border-radius: 5px;
background-color: #1abc9c;
color: #fff;
font-size: 18px;
outline: none;
cursor: pointer;
/* 按鈕需要設置相對定位，目的用於包裹內部元素 */
position: relative;
overflow: hidden;
box-shadow: 6px 7px 40px -4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<button class="btn">
Button Ripple Effect
</button>
</body>
</html>
- 頁面展示
![在這裏插入圖片描述]()
- 2、向span元素添加樣式
現在爲span元素添加樣式，該樣式將在單擊按鈕時顯示。
.btn span {
position: absolute;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.4);
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
animation: ripple 1s ease-in-out;
opacity: 0;
}
- 3、編寫動畫
編寫ripple 動畫用以span元素使用。
/* 添加動畫 */
@keyframes ripple {
from {
opacity: 1;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(30);
}
}
- 4、添加腳本控制邏輯
現在，我們將在按鈕單擊上添加span元素，並根據鼠標單擊的位置進行添加。在按鈕上單擊，我們必須執行以下操作：
- 1.創建span元素並向其添加波紋類。
- 2.使用event變量獲取光標的點擊位置。
- 3.設置span元素的位置。
- 4.刪除span元素，以避免在按鈕中出現span元素。
<script>
const btn = document.querySelector(".btn");
let t=null;
// 監聽點擊事件
btn.onclick = function (e) {
// 創建span元素
let ripple = document.createElement("span");
// 爲span添加一個ripple樣式
ripple.classList.add("ripple");
// 把span元素插入按鈕中
this.appendChild(ripple);
// 獲取點擊x座標
let x = e.clientX - e.target.offsetLeft;
// 獲取點擊y座標
let y = e.clientY - e.target.offsetTop;
// 爲span設置新的定位
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
// 0.3s後還原初始狀態
t = setTimeout(() => {
ripple.remove();
clearTimeout(t);
t= null;
}, 300);
};
</script>
- 最終頁面輸出
![在這裏插入圖片描述]()
