帮我更改一下button点击效果 水纹效果。

html-css011

帮我更改一下button点击效果 水纹效果。,第1张

首先在代码的如下位置打印事件对象,检查是不是重复调用了:

结果点击上面的“waves”和“btn”按钮分别返回了不同的事件对象,所以排除重复调用的可能。

在代码的129行,将动画定时器的时间改大(减慢动画执行速度),观察效果:

经观察,发现这个“水波纹”特效是全屏的,你看到的点击一个按钮后两个按钮上都有水波纹,其实是因为生成的那个水波纹动画层全屏覆盖住了整个页面,由于水波纹层是白色半透明的,所以页面的白色区域下你看不见,有其他颜色的区域都会看见(你可以把body的背景颜色改为除白色外的其他颜色,再点按钮试试)。

根因已经找到,解决的办法很简单,让生成的水波纹层不超出当前按钮区域即可,具体为:在代码第20行,为.waves, .btn 增加两行CSS代码:

position: relative

overflow: hidden

方法/步骤

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式:

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果:

上面的CSS代码可以生成如下图的动画效果:

在“Stana”效果中,使用了html5 SVG clipPath,在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性,这个效果也需要浏览器的支持才能看得到的。