Ripple

Ripple精品文章

• 

  【教程】React 实现 Material Design 中涟漪（Ripple）效果

  ...言 Material Design 推出已有接近4年，大家对触摸涟漪（Ripple）应该不陌生,简单来说就是一个水波纹效果（见下图）。前段时间接触了 material-ui 这个库，看了下 Ripple 的源码，觉得并不是一个非常好的实现，所以决定自己写一...

  hzx 2019-08-22 17:11 评论0 收藏0
• 

  css动画-实现一个最简单的水波纹效果button

  ...* 为了增加用户体验 */ position: relative; /* 为了保持和ripple的位置关系 */ overflow: hidden; /* 为了遮盖超出的ripple */ } 效果 2. 添加水波纹的基础css样式 代码 .ripple { position: absolute; /* 为了保持和button的位置关系 */ border-ra...

  Hancock_Xu 2019-08-30 15:56 评论0 收藏0
• 

  纯css实现Material Design中的水滴动画按钮

  ...从小变大，用css3中的动画很容易实现 示例代码 @keyframes ripple{ from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } 通常用js来实现的方式很简单，就是给点击元...

  lolomaco 2019-08-29 17:01 评论0 收藏0
• 

  纯css实现Material Design中的水滴动画按钮

  ...从小变大，用css3中的动画很容易实现 示例代码 @keyframes ripple{ from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } 通常用js来实现的方式很简单，就是给点击元...

  ispring 2019-08-02 11:44 评论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 评论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 评论0 收藏0
• 

  原生js实现简单的Ripple按钮

  原生js实现简单的Ripple按钮 效果如图 准备食材（html部分） 首页 我的 ...

  CoXie 2019-08-29 12:16 评论0 收藏0
• 

  原生js实现简单的Ripple按钮

  原生js实现简单的Ripple按钮 效果如图 准备食材（html部分） 首页 我的 ...

  shevy 2019-08-20 15:20 评论0 收藏0
• 

  原生js实现简单的Ripple按钮

  原生js实现简单的Ripple按钮 效果如图 准备食材（html部分） 首页 我的 ...

  Kerr1Gan 2019-08-01 16:34 评论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 评论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 评论0 收藏0
• 

  vue 开发波纹点击特效组件

  ...以达到波纹扩散的效果。 我将组件分为两个部分， circleRipple.vue 和 TouchRipple.vue 各自实现不同的功能 circleRipple.vue 波纹扩散组件，完成波纹扩散的效果 TouchRipple.vue 监听 mouse 和 touch 相关事件，控制 circleRipple 的显示，位置。 ci...

  chavesgu 2019-08-20 11:06 评论0 收藏0
• 

  jQuery数十行代码实现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 评论0 收藏0
• 

  jQuery数十行代码实现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 评论0 收藏0