類似material-ui的button效果
步驟
1. 在頁面寫出一個button 並賦予簡單的樣式
代碼
<body>
<div>
<button>這是一個按鈕</button>
</div>
</body>
button {
display: block; /* button 默認是inline-block 無法用margin給它居中 */
margin: 50px auto;
height: 60px;
width: 150px;
color: #FFF;
font-size: 16px;
background: #E95546;
outline: none;
border: 0;
cursor: pointer; /* 爲了增加用戶體驗 */
position: relative; /* 爲了保持和ripple的位置關係 */
overflow: hidden; /* 爲了遮蓋超出的ripple */
}
效果
![]()
2. 添加水波紋的基礎css樣式
代碼
.ripple {
position: absolute; /* 爲了保持和button的位置關係 */
border-radius: 50% 50%; /* 水波紋圓形 */
background: rgba(255, 255, 255, 0.4); /* 水波紋顏色 */
/* 下面與動畫效果相關 是0%時候的狀態 */
/* 默認的 transform-origin 是 center 即中心點 */
transform: scale(0);
-webkit-transform: scale(0);
opacity: 1;
}
3. 給水波紋加上動畫的css
代碼
.rippleEffect {
/* 執行時長0.6s、效果爲漸變(linear)、名稱爲rippleDrop的動畫 */
-webkit-animation: rippleDrop .6s linear;
animation: rippleDrop .6s linear;
}
@keyframes rippleDrop {
/* 下面是動畫100%時候的狀態 */
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
@-webkit-keyframes rippleDrop {
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
4. 最後添加點擊事件
代碼
$("button").click(function (e) {
$(".ripple").remove(); // 每次先把之前添加的水波紋div刪除
let button_left = $(this).offset().left; // button距離頁面左邊的距離
let button_top = $(this).offset().top; // button距離頁面上邊的距離
let button_width = $(this).width(); // button的寬度
let button_height = $(this).height(); // button的高度
// 水波紋div爲一個圓形，使得它的半徑等於button的最長邊，故在這裏計算最長邊是多少
let ripple_width = 0;
ripple_width = button_width > button_height ? button_width : button_height;
// e.pageX是click事件的鼠標觸發點距離頁面左邊的距離
// e.pageY是click事件的鼠標觸發點距離頁面上邊的距離
// 這裏的算法是，算出鼠標點擊點的座標爲 (e.pageX - button_left, e.pageY - button_top)
// 但是由於`transform-origin`默認是center，所以這裏再減去半徑纔是div應該的位置
let ripple_x = e.pageX - button_left - ripple_width / 2;
let ripple_y = e.pageY - button_top - ripple_width / 2;
// 往button裏面塞水波紋div
$(this).prepend("<div class='ripple'></div>");
// 給水波紋div應用樣式和動畫
$(".ripple")
.css({
width: ripple_width + 'px',
height: ripple_width + 'px',
top: ripple_y + 'px',
left: ripple_x + 'px'
})
.addClass("rippleEffect");
})
Attention 別忘了引入jquery哦
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
效果
![]()
END
源碼地址
