css動畫-實現一個最簡單的水波紋效果button

時間 2019-12-14

標籤 css 動畫實現一個最簡單波紋效果 button 欄目 CSS 简体版

原文原文鏈接

相似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

源碼地址

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

css動畫-實現一個最簡單的水波紋效果button

相似material-ui的button效果

步驟

1. 在頁面寫出一個button 並賦予簡單的樣式

2. 添加水波紋的基礎css樣式

3. 給水波紋加上動畫的css

4. 最後添加點擊事件

END

1. 在頁面寫出一個`button` 並賦予簡單的樣式