Ripple精品文章

• 

  【教程】React 實(shí)現(xiàn) Material Design 中漣漪（Ripple）效果

  ...言 Material Design 推出已有接近4年，大家對(duì)觸摸漣漪（Ripple）應(yīng)該不陌生,簡(jiǎn)單來說就是一個(gè)水波紋效果（見下圖）。前段時(shí)間接觸了 material-ui 這個(gè)庫(kù)，看了下 Ripple 的源碼，覺得并不是一個(gè)非常好的實(shí)現(xiàn)，所以決定自己寫一...

  hzx 2019-08-22 17:11 評(píng)論0 收藏0
• 

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

  ...* 為了增加用戶體驗(yàn) */ position: relative; /* 為了保持和ripple的位置關(guān)系 */ overflow: hidden; /* 為了遮蓋超出的ripple */ } 效果 2. 添加水波紋的基礎(chǔ)css樣式 代碼 .ripple { position: absolute; /* 為了保持和button的位置關(guān)系 */ border-ra...

  Hancock_Xu 2019-08-30 15:56 評(píng)論0 收藏0
• 

  純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕

  ...從小變大，用css3中的動(dòng)畫很容易實(shí)現(xiàn) 示例代碼 @keyframes ripple{ from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } 通常用js來實(shí)現(xiàn)的方式很簡(jiǎn)單，就是給點(diǎn)擊元...

  lolomaco 2019-08-29 17:01 評(píng)論0 收藏0
• 

  純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕

  ...從小變大，用css3中的動(dòng)畫很容易實(shí)現(xiàn) 示例代碼 @keyframes ripple{ from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } 通常用js來實(shí)現(xiàn)的方式很簡(jiǎn)單，就是給點(diǎn)擊元...

  ispring 2019-08-02 11:44 評(píng)論0 收藏0
• 

  css3 水紋效果（仿寫阿里云）

  ... 2px solid #ff903d; opacity: 0; -webkit-animation: ripple 4.5s ease-out 225ms infinite; animation: ripple 4.5s ease-out 225ms infinite; } .point_...

  canger 2019-08-30 13:57 評(píng)論0 收藏0
• 

  css3 水紋效果（仿寫阿里云）

  ... 2px solid #ff903d; opacity: 0; -webkit-animation: ripple 4.5s ease-out 225ms infinite; animation: ripple 4.5s ease-out 225ms infinite; } .point_...

  weizx 2019-08-01 18:33 評(píng)論0 收藏0
• 

  原生js實(shí)現(xiàn)簡(jiǎn)單的Ripple按鈕

  原生js實(shí)現(xiàn)簡(jiǎn)單的Ripple按鈕 效果如圖 準(zhǔn)備食材（html部分） 首頁 我的 ...

  CoXie 2019-08-29 12:16 評(píng)論0 收藏0
• 

  原生js實(shí)現(xiàn)簡(jiǎn)單的Ripple按鈕

  原生js實(shí)現(xiàn)簡(jiǎn)單的Ripple按鈕 效果如圖 準(zhǔn)備食材（html部分） 首頁 我的 ...

  shevy 2019-08-20 15:20 評(píng)論0 收藏0
• 

  原生js實(shí)現(xiàn)簡(jiǎn)單的Ripple按鈕

  原生js實(shí)現(xiàn)簡(jiǎn)單的Ripple按鈕 效果如圖 準(zhǔn)備食材（html部分） 首頁 我的 ...

  Kerr1Gan 2019-08-01 16:34 評(píng)論0 收藏0
• 

  Material Design for Bootstrap

  ...scale(0); z-index: 0; } .animate-hand.animate { -webkit-animation: ripple .5s linear; animation: ripple .5s linear; } @-webkit-keyframes ripple { 100% { opacity: 0; ...

  Ocean 2019-08-30 13:06 評(píng)論0 收藏0
• 

  Material Design for Bootstrap

  ...scale(0); z-index: 0; } .animate-hand.animate { -webkit-animation: ripple .5s linear; animation: ripple .5s linear; } @-webkit-keyframes ripple { 100% { opacity: 0; ...

  fasss 2019-08-19 18:30 評(píng)論0 收藏0
• 

  vue 開發(fā)波紋點(diǎn)擊特效組件

  ...以達(dá)到波紋擴(kuò)散的效果。 我將組件分為兩個(gè)部分， circleRipple.vue 和 TouchRipple.vue 各自實(shí)現(xiàn)不同的功能 circleRipple.vue 波紋擴(kuò)散組件，完成波紋擴(kuò)散的效果 TouchRipple.vue 監(jiān)聽 mouse 和 touch 相關(guān)事件，控制 circleRipple 的顯示，位置。 ci...

  chavesgu 2019-08-20 11:06 評(píng)論0 收藏0
• 

  jQuery數(shù)十行代碼實(shí)現(xiàn)Material Design的漣漪效果

  ...）漣漪的顏色，速度可以自行修改 代碼 $(function(){ $(.ripple).click(function(e){ if ($(this).find(#wave).length){ $(this).find(#wave).remove(); } $(this).append(); var wave=$(this).find(#wave...

  rottengeek 2019-08-29 12:31 評(píng)論0 收藏0
• 

  jQuery數(shù)十行代碼實(shí)現(xiàn)Material Design的漣漪效果

  ...）漣漪的顏色，速度可以自行修改 代碼 $(function(){ $(.ripple).click(function(e){ if ($(this).find(#wave).length){ $(this).find(#wave).remove(); } $(this).append(); var wave=$(this).find(#wave...

  vslam 2019-08-20 16:13 評(píng)論0 收藏0