js点击按钮实现水波纹效果代码(CSS3和Canves)

近来看到个不错的按钮点击效果，当点击时产生一次水波涟漪效果，挺好玩的，于是简单的实现了下（没考虑低版本浏览器兼容问题)

先看看效果吧，如下图（录制可交换的图像格式软件有点渣，看起来卡卡的.)

这种效果可以由元素内嵌套canves实现，也可以由css3实现。

Canves实现

网上摘了一份canves实现的代码，略微去掉了些重复定义的样式并且给出射流研究…注释，代码如下

超文本标记语言代码：a=' BTN颜色-1材料-设计' data-color=' # 2f 5398 '按我！/a

钢性铸铁代码：

* { box-size :边框-盒子；大纲：无；} body { font-family : ' Open Sans '；字号： 100%；字体粗细： 300；线高： 1.5 em文本对齐：中心；}.BTN { border : none display :内联块；颜色：白色；飞越：隐藏；margin : 1 rempadd : 0；宽度： 150像素；高度： 40px文本对齐：中心；线高： 40px边界半径： 5px} .BTN。color-1 {底色： # 426 fc 5；}.BTN边境。颜色-1 {背景色：透明；border: 2px固体# 426fc5color: # 426fc5}。材料设计{相对位置：}.材质-设计画布{ opacity: 0.25绝对位置：top : 0；左： 0；}.容器{ align-content : center；align-items : flex-start；display : flex flex-方向：行；柔性包装：包装；正义-内容：中心；margin: 0自动最大宽度： 46雷姆；}js代码：

var canvas={}，centerX=0，centerY=0，color=' '，containers=document。getelementsbyclassname('材料-设计')上下文={}，元素={}，半径=0，//根据回收生成requestAnimationFrame动画request animsframe=function(){ return(window。requestanimationframe | | window。mozrequestanimationframe | |窗口。orequestanimationframe | | window。msrequestanimationframe | |函数(回调){ window.setTimeout(回调，1000/60);} );} (), //为每个指定元素生成can ves init=function(){ containers=array。原型。切片。调用(容器)；for(var I=0；一。集装箱。长度；I=1){ canvas=document。创建元素(“画布”)；canvas.addEventListener('click '，press，false)；容器[i].appendChild(画布);帆布。风格。宽度=' 100% '；帆布。风格。高度=' 100% '；帆布。宽度=画布。用.抵消；帆布。高度=画布。偏移光线；} }, //点击并且获取需要的数据，如点击坐标、元素大小、颜色按=函数(事件){ color=event。到元素。parentelement。数据集。颜色；元素=事件。到元素；context=元素。get context(' 2d ')；半径=0;centex=event . offsetxcentry=event。偏移；context.clearRect(0，0，element.width，element。高度)；draw()；}, //绘制圆形，并且执行动画draw=function(){ context。begin path()；语境。arc(CentreX，centerY，半径，0,2 *数学，假);context.fillStyle=colorcontext。fill()；半径=2;//通过判断半径小于元素宽度，不断绘制半径=2的圆形if(半径元素。宽度){ RequestAnimanFrame(draw)；} };init()；CSS3实现

接下来就是纯手打的代码了.觉得还是css3实现的方便些，可能是钢性铸铁写习惯了.

超文本标记语言代码

向我挥手！/a

钢性铸铁代码。波{ position : relativecursor : pointer指针；显示：内嵌块；飞越：隐藏；文本对齐：中心；-web kit-tap-高亮-color :透明；z索引：1;}.海浪海浪-动画{绝对位置：边界半径：50%;宽度：25 px高度：25电容：0背景：rgba(255，255，255，0.3)；过渡：所有0.7秒缓解；转换属性：变换，不透明度，-web工具包-转换；-web套件-transform : scale(0)；变换：比例(0)；指针-事件3360无} .ts-BTN {宽度： 200像素；高度： 56px线高： 56px背景技术# f 57035 color : # fffborder-radius : 5px；}js代码

文件。add event listener(' DOMContentLoaded '，function(){ var duration=750；//样式线拼凑var forStyle=function(position){ var csstr=' '；for(位置变化键){ if(位置。hasown属性(key))csstr=key ' : ' position[key]'；'；};返回csstr }//获取鼠标点击位置var FOrrect=function(target){ var position={ top :0，left:0 }，ele=document.documentElement '未定义！=目标类型。getboundingclientrect(position=target。getboundingclientrect())；返回{ top :位置。顶窗。佩吉约夫塞特-埃莱。客户端顶部，左侧：位置。左窗。佩吉索福塞特-埃莱。客户端左} } var show=function(event){ var pDiv=event。目标，cDiv=文档。create element(' div ')；pdiv。append child(CDIv)；var rectObj=forRect(pDiv)，_ height=event。直接的目标。top，_left=event.pageX - rectObj.left，_ scale=' scale '(PdIV。客户端宽度/100 * 10 ')'；var position={ top : _ height ' px '，left : _ left ' px ' }；cdiv。类名=cdiv。类名' waves-animation '，cDiv.setAttribute('style '，forStyle(position))，position['-web kit-transform ']=_ scale，position['-moz-transform ']=_ scale，position.transform=_scale，position.opacity='1 '，position['-web kit-transition-duration ']=duration ' ms '，position['-moz-transition-duration var-finish style={ opacity 3360 '，-web kit-transition过渡时间-moz-transition-duration ' : duration ' ms '，'-o-transition-duration ' : duration ' ms '，' transition-duration ' : duration ' ms '，'-webkit-transform' : _scale '，-o-transform' : _scale，top: _height 'px '，left : _ left ' px ' setTimeout(function(){ cdivsetattribute(' style '，Forstyle(finish style))；setTimeout(函数(){ PDIv。移除子代(CDIv)；},持续时间);}，100) } document.querySelector(' .波浪')。添加事件侦听器(“单击”)，函数{ show(e)；},1);},1);就这些，原理也简单，获取点击位置添加样式顺便，中秋快乐~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。