原生js+css 实现 material design 点击效果

NickZhou 发布于2019-08-20 17:15 / 1119人阅读

摘要：最近想要在按钮上添加的点击效果，看了看，单纯的想要这种效果，而要引入一些不必要的内容觉得不划算，然后自己动手造了个轮子。项目地址上传不了图只能用了效果使用文字只要在内添加并且在内传入便可以实现水波纹效果。

最近想要在按钮上添加material design的点击效果，看了看muse-ui，单纯的想要这种效果，而要引入一些不必要的内容觉得不划算，然后自己动手造了个轮子。
项目地址：github

上传不了gif图只能用 JSFiddle了： JSFiddle效果

Import using script tag

使用

    new Ripple({
            cName: "md-button",
            color: "red",
            time: "0.5s",
            MaxNum: 5
        })

只要在

Option	Description
cName	element的className，默认为 "md-button"
r	水波纹最小半径，不传此参数则为自动计算
color	水波纹颜色默认为：rgba(0, 0, 0, 0.3)
time	animation的时间默认为：0.5s
MaxNum	水波纹的最大数量默认为：5
center	水波纹的圆心。默认为：false
zIndex	设置z-index 默认为：null,当水波纹被覆盖时，可以使用此参数

原生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
‘纯css实现Material Design中的水滴动画按钮’的js体验优化

摘要：前言在上一篇，我们已经实现了用纯实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。前言在上一篇，我们已经实现了用纯css实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今...

genefy 2019-08-29 17:02 评论0 收藏0
‘纯css实现Material Design中的水滴动画按钮’的js体验优化

摘要：前言在上一篇，我们已经实现了用纯实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今天我们来解决这个问题。前言在上一篇，我们已经实现了用纯css实现水滴扩散动画，但是有一些瑕疵，文章结尾处也提到过，一是页面加载进来就会看到按钮上的水滴动画运动一次，二是点击的时候不能根据鼠标的位置来扩散，今...

xiaoqibTn 2019-08-23 12:28 评论0 收藏0
纯css3漂亮的checkbox和radio美化效果插件Pretty.css插件

摘要：插件介绍是一款纯漂亮的和美化效果。可以和多种字体图标结合使用，对原生的和进行美化，还可以制作按钮点击时的动画效果。支持的图标库有安装可以使用，或来安装。插件介绍 pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用，对原生的checkbox和radio进行美化，还可以制作按钮点击时的动画效果。 showImg(...

eechen 2019-08-30 15:44 评论0 收藏0