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

2023-03-08 13:19:01html-css021

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

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

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

在代码的129行，将动画定时器的时间改大（减慢动画执行速度），观察效果：

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

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

position: relative

overflow: hidden

上面的是CSS的属性。这个是css的滤镜效果。1.Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 透明度起始透明度结束时透明度样式“1.2.3”坐标。2.Glow(Color=#0000ff, Strength=5) 边缘发光颜色大小3.BlendTrans(Duration=?) 淡入淡出方向4.Blur(Add=?, Direction=?, Strength=?) 模糊是否模糊方向大小5.Chroma(Color=?) 透明颜色（只有透明图像gif可以用这个效果）6.DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 投影颜色坐标大小7.FlipH 水平反转8.FlipV 垂直反转9.Glow(Color=?, Strength=?) 边缘发光颜色大小10.Gray 灰度11.Invert 负片（胶片）12.Light 亮度（变亮、波纹光影）13.Mask(Color=?) 遮罩颜色（凹陷效果）14.RevealTrans(Duration=?, Transition=?) 动态切换（切换时间切换效果：1-23种切换方式）15.Shadow(Color=?, Direction=?)16.Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) 垂直扭曲17.Xray X光片效果我们的网名一样，所以我认真的回答了你的问题。有缘啊

如果帮助到您，请记得采纳为满意答案哈，谢谢！祝您生活愉快！ vae.la

搜了几篇老外的文章，提到 svg 的 forginObject 内的 HTML 元素，当应用 CSS3 动画时，动画的 transform-origin 是基于最外层 body 定位的，貌似无解。

个人建议使用 svg 的 SMIL 动画来实现波纹特效，你大屏展示用的话，兼容性啥的应该不是主要问题。写了简单示例代码：

<!DOCTYPE html>

<head>

<style>

html,

body,

svg {

width: 100%

height: 100%

}