成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css動畫-實(shí)現(xiàn)一個(gè)最簡單的水波紋效果button

Hancock_Xu / 2391人閱讀

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

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

   

       
   


button {
   display: block; /* button 默認(rèn)是inline-block 無法用margin給它居中 */
   margin: 50px auto;
   height: 60px;
   width: 150px;
   color: #FFF;
   font-size: 16px;
   background: #E95546;
   outline: none;
   border: 0;
   cursor: pointer; /* 為了增加用戶體驗(yàn) */
   
   position: relative; /* 為了保持和ripple的位置關(guān)系 */
   overflow: hidden; /* 為了遮蓋超出的ripple */
}
效果

2. 添加水波紋的基礎(chǔ)css樣式 
代碼
.ripple {
  position: absolute; /* 為了保持和button的位置關(guān)系 */
  border-radius: 50% 50%; /* 水波紋圓形 */
  background: rgba(255, 255, 255, 0.4);  /* 水波紋顏色 */
  
  /* 下面與動畫效果相關(guān) 是0%時(shí)候的狀態(tài) */
  /* 默認(rèn)的 transform-origin 是 center 即中心點(diǎn) */
  transform: scale(0); 
  -webkit-transform: scale(0);
  opacity: 1; 
}
3. 給水波紋加上動畫的css 
代碼
.rippleEffect {
  /* 執(zhí)行時(shí)長0.6s、效果為漸變(linear)、名稱為rippleDrop的動畫 */
  -webkit-animation: rippleDrop .6s linear; 
  animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  /* 下面是動畫100%時(shí)候的狀態(tài) */
  100% {
    transform: scale(2); 
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

@-webkit-keyframes rippleDrop {
  100% {
    transform: scale(2);
    -webkit-transform: scale(2);
    opacity: 0;
  }
}
4. 最后添加點(diǎn)擊事件 
代碼
$("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為一個(gè)圓形，使得它的半徑等于button的最長邊，故在這里計(jì)算最長邊是多少
  let ripple_width = 0;
  ripple_width = button_width > button_height ? button_width : button_height; 

  // e.pageX是click事件的鼠標(biāo)觸發(fā)點(diǎn)距離頁面左邊的距離
  // e.pageY是click事件的鼠標(biāo)觸發(fā)點(diǎn)距離頁面上邊的距離
  // 這里的算法是，算出鼠標(biāo)點(diǎn)擊點(diǎn)的坐標(biāo)為 (e.pageX - button_left, e.pageY - button_top)
  // 但是由于`transform-origin`默認(rèn)是center，所以這里再減去半徑才是div應(yīng)該的位置
  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應(yīng)用樣式和動畫
  $(".ripple")
  .css({
    width: ripple_width + "px",
    height: ripple_width + "px",
    top: ripple_y + "px",
    left: ripple_x + "px"
  })
  .addClass("rippleEffect");

})
Attention 別忘了引入jquery哦
效果

END 
源碼地址

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117480.html

相關(guān)文章

  • 使用CSS實(shí)現(xiàn)逼真的水波紋點(diǎn)擊效果

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

    Tony_Zby 評論0 收藏0

  • 使用CSS實(shí)現(xiàn)逼真的水波紋點(diǎn)擊效果

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

    Cciradih 評論0 收藏0

  • 原生js+css 實(shí)現(xiàn) material design 點(diǎn)擊效果

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

    NickZhou 評論0 收藏0

  • 原生js+css 實(shí)現(xiàn) material design 點(diǎn)擊效果

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

    tolerious 評論0 收藏0

  • 原生js+css 實(shí)現(xiàn) material design 點(diǎn)擊效果

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

    why_rookie 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<