Material Design风格纯js按钮点击波特效

所属分类:其他-动画效果

 2960  25  查看评论 (1)
Material Design风格纯js按钮点击波特效 ie兼容10

Material Design之水波纹点击效果RippleEffect使用

在页面中引入ripple.js文件。

<script src="path/to/ripple.js"></script>

HTML结构

为你需要制作按钮点击波效果的元素添加data-ripple属性。

<button data-ripple>Click Me</button>

CSS样式

为点击波添加下面的CSS样式:

.ripple-container {
}
.ripple-container .ripple{
    background-color: rgba(255,255,255,0.4);
    animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
}
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    80% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
    }
}

初始化插件

使用下面的JavaScript代码来在按钮点击时,激活点击波效果。

Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){
  new RippleEffect(element);
});


相关插件-动画效果

jQuery三维倾斜的滚动效果

有了这个插件,你可以创建一个漂亮的滚动效果,将一个简单的布局网站到令人吃惊的网站。
  动画效果
 7443  17

jQuery数据滚动

当页页滚动到一定位置时,数值自动增加动态效果
  动画效果
 10618  140

jquery车站数据显示牌效果插件Flapper

Flapper是jQuery插件的一个复制split-flap(或“Solari”),最常见的应用地方是在火车站和机场,以及70年代爸爸的闹钟上。 使用时,只要将Flapper关联到到网页上的任何输入界面。每当输入变化的事件触发,Flapper将更新显示
  动画效果
 6396  3

简单实用的jQuery和CSS3卡片自动翻牌特效

这是一款简单实用的jQuery和CSS3卡片自动翻牌特效。该卡片翻转效果使用CSS3透视和backfacevisibility属性来制作卡片正反面效果,并使用jQuery使其自动旋转起来。
  动画效果
 8725  24

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    昏昏沉沉的飞 0
    2016/12/5 16:12:27
    移动端不能使用 回复
取消回复