css-点击按钮实现水滴动画

平常在使用APP的时候,当用户点击某个按钮的时候,按钮会出现水滴的效果,原生APP开发的时候,会提供相关的动画,如果在PC端或者H5的时候想实现这个效果,也可以找一些相关的库来进行开发,但是为了某一个小小的交互而引入外部的JS和CSS,始终感觉不划算,自己如果用css+js来进行开发,可能体验和开发会更加方便。

一、CSS


//tip:var()是CSS3提供的函数属性值修改
//地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/var

二、HTML


	

三、js

//获取当前用户点击的位置,然后从当前点击的位置进行放大

//setProperty()用来从新设置一个新的CSS属性
//地址:http://www.runoob.com/jsref/met-cssstyle-setproperty.html

内容非原创,只是把原有的代码进行copy了,目前需要优化的就是按钮的封装,以及结构的布局以及样式修改。
原作者文章地址:https://segmentfault.com/a/1190000016758776

你可能感兴趣的:(动画交互)