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

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

 4358  40  查看评论 (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);
});


相关插件-动画效果

像褶皱纸一样褶皱DOM的JQUERY插件-QRIDOMI

今天我要给大家介绍一款插件,该插件实现了将类似折叠纸张的效果用在DOM元素上,当我们用鼠标在DOM元素上接触或拖动的时候便会出现褶皱的效果。有如下特点: 1、零依赖 2、整个插件大小小于15k 3、可选择的jquery支持 4、能工作在IOS上
  动画效果
 8276  29

小球碰撞(完全弹性碰撞)

给自己主页目录用这个的,顺便传上来。
  动画效果
 3053  33

消失在宇宙星空中的404页面

宇宙星空404页面
  动画效果
 11528  81

3D鼠标覆盖图片特效-3D THUMBNAIL HOVER EFFECTS

今天我要给大家介绍的是一款基于jquery和css3的鼠标覆盖图片插件-3D THUMBNAIL HOVER EFFECTS。当我们的鼠标移动到图片上时就会出现看上去有点像纸张的褶皱的效果,该插件一共有四种效果可供我们选择。
  动画效果
 15181  63

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

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