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

Hancock_Xu 發布于2019-08-30 15:56 / 2336人閱讀

摘要：類似的效果步驟在頁面寫出一個并賦予簡單的樣式代碼這是一個按鈕默認是無法用給它居中為了增加用戶體驗為了保持和的位置關系為了遮蓋超出的效果添加水波紋的基礎樣式代碼為了保持和的位置關系水波紋圓形水波紋顏色下面與動畫效果相關是時候的狀態默認

類似material-ui的button效果 步驟 1. 在頁面寫出一個button 并賦予簡單的樣式

代碼

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應用樣式和動畫
  $(".ripple")
  .css({
    width: ripple_width + "px",
    height: ripple_width + "px",
    top: ripple_y + "px",
    left: ripple_x + "px"
  })
  .addClass("rippleEffect");

})

Attention 別忘了引入jquery哦

效果

END

源碼地址

GPU云服務器云服務器水波紋動畫波紋進度動畫水波紋效果 html 波紋效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117480.html

使用CSS實現逼真的水波紋點擊效果

這篇文章特別介紹如何使用CSS來完成水波紋的效果。 div的層層疊疊雖然webkit具有遮罩的能力（webkit mask），不過webkit雖然強大，但在跨瀏覽器上總是它的罩門，況且在性能上也是往往會造成困擾（這也是為什么chrome要這么吃資源了），因此撇開webkit不談，我們該用什么方法，才可以做出水波紋的效果呢？答案就是用疊的方式，這個水波紋效果的原理其實就是用六個div疊在一起，接著...

Tony_Zby 2019-08-02 16:16 評論0 收藏0
使用CSS實現逼真的水波紋點擊效果

這篇文章特別介紹如何使用CSS來完成水波紋的效果。 div的層層疊疊雖然webkit具有遮罩的能力（webkit mask），不過webkit雖然強大，但在跨瀏覽器上總是它的罩門，況且在性能上也是往往會造成困擾（這也是為什么chrome要這么吃資源了），因此撇開webkit不談，我們該用什么方法，才可以做出水波紋的效果呢？答案就是用疊的方式，這個水波紋效果的原理其實就是用六個div疊在一起，接著...

Cciradih 2019-08-30 10:52 評論0 收藏0
原生js+css 實現 material design 點擊效果

摘要：最近想要在按鈕上添加的點擊效果，看了看，單純的想要這種效果，而要引入一些不必要的內容覺得不劃算，然后自己動手造了個輪子。項目地址上傳不了圖只能用了效果使用文字只要在內添加并且在內傳入便可以實現水波紋效果。最近想要在按鈕上添加material design的點擊效果，看了看muse-ui，單純的想要這種效果，而要引入一些不必要的內容覺得不劃算，然后自己動手造了個輪子。項目地址：gith...

NickZhou 2019-08-20 17:15 評論0 收藏0
原生js+css 實現 material design 點擊效果

摘要：最近想要在按鈕上添加的點擊效果，看了看，單純的想要這種效果，而要引入一些不必要的內容覺得不劃算，然后自己動手造了個輪子。項目地址上傳不了圖只能用了效果使用文字只要在內添加并且在內傳入便可以實現水波紋效果。最近想要在按鈕上添加material design的點擊效果，看了看muse-ui，單純的想要這種效果，而要引入一些不必要的內容覺得不劃算，然后自己動手造了個輪子。項目地址：gith...

tolerious 2019-08-29 12:46 評論0 收藏0
原生js+css 實現 material design 點擊效果

摘要：最近想要在按鈕上添加的點擊效果，看了看，單純的想要這種效果，而要引入一些不必要的內容覺得不劃算，然后自己動手造了個輪子。項目地址上傳不了圖只能用了效果使用文字只要在內添加并且在內傳入便可以實現水波紋效果。最近想要在按鈕上添加material design的點擊效果，看了看muse-ui，單純的想要這種效果，而要引入一些不必要的內容覺得不劃算，然后自己動手造了個輪子。項目地址：gith...

why_rookie 2019-08-01 16:58 評論0 收藏0