svgripples是一款效果非常炫酷的基于SVG的Material Design风格按钮点击波特效。该点按钮击波特效共有4种不同的效果,分别为:圆形波,圆形渐变波,多边形波和线性渐变波。特效中通过TweenMax.js和SVG相结合,制作出邻人惊叹的点击波效果。在线预览 ...
svgripples是一款效果非常炫酷的基于SVG的Material Design风格按钮点击波特效。该点按钮击波特效共有4种不同的效果,分别为:圆形波,圆形渐变波,多边形波和线性渐变波。特效中通过TweenMax.js和SVG相结合,制作出邻人惊叹的点击波效果。
在线预览 源码下载
制作方法
HTML结构
该按钮点击波使用的SVG元素的代码非常简单。SVG中使用了<symbol>
元素-它用于定义可重复使用的符号。并在<symbol>
元素放置需要的SVG图形。
为了使用上面定义的<symbol>
元素,在按钮上使用了<use>
元素-它可以在SVG图像中多次重用一个预定义的SVG图形。它通过xlink:href
属性来指向前面定义的<symbol>
元素的ID。
CSS样式
点击波的主要CSS样式只有两句:
由于只需要在.ripple-obj
的父元素上产生点击波效果,所以使用pointer-events: none;
来阻止SVG上产生点击波。
点击波在开始的时候是不可见的,所以设置它的透明度为0。另外还将波形对象放置在按钮的左上角位置。
JAVASCRIPT
为了制作动态按钮点击波效果,特效中使用GreenSock的TweenMax库来制作SVG动画。rippleAnimation()
函数是整个点击波效果的主要动画函数。
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:4种基于SVG的Material Design风格按钮点击波特效
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。