长沙网站建设教您制作按钮波纹特效

一、效果简介

当鼠标移入按钮并点击时,在点击处会出现一个半透明的圆,并迅速扩大消失.看起来就像在水池中投出一颗石子,石子接触到水面的瞬间会泛起一圈不断扩大的涟漪一样.

二、效果代码展示

长沙网站制作主要使用js进行控制,当鼠标移动到按钮内并进行点击时,触发click监听事件:

const blow = document.createElement('span');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;

通过计算获取鼠标实际点击的位置,在该位置创建一出个span元素,并附上类名lianyi.

而在css代码中,长沙网站开发已经提前为lianyi进行了设置.将它写成了一个半透明的圆形,并为它附上关键帧动画:

在span出现的瞬间,它的大小会在0.7秒内从 scale(0) 放大到 scale(4),透明度 opacity 从0.8 逐渐变为 0.

于是,最终停留在我们眼中的效果就是像水面产生的涟漪一样,迅速扩散又迅速消失.

三.最终效果视频展示

四、应用扩展

在一些场合,点击了按钮的瞬间就会跳转到其他页面,用户可能看不到这个效果.这时我们就可以修改js代码,将'click'点击事件,改为'mouseenter'触发.在鼠标移入按钮时,波纹就会出现.

以上则是长沙网站建设整理出的制作按钮波纹特效的方法,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.