首先,GitHub的右上方的“Download Zip”zip文件下载。然后将zip文件解压,将解压后js文件夹中的「TweenMax.min.js」和「main.js」加在网页的</body>前面并加载按钮样式表main.css; <script src="js/TweenMax.min....
首先,GitHub的右上方的“Download Zip”zip文件下载。然后将zip文件解压,将解压后js文件夹中的「TweenMax.min.js」和「main.js」加在网页的</body>前面并加载按钮样式表main.css;
<script src="js/TweenMax.min.js"></script> <script src="js/main.js"></script> <link href="CSS/main.css"/ rel="stylesheet">
html代码示例:
<button id="component-1" class="button button--1"> 点击按钮 <span class="button__container"> <span class="circle top-left"></span> <span class="circle top-left"></span> <span class="circle top-left"></span> <span class="button__bg"></span> <span class="circle bottom-right"></span> <span class="circle bottom-right"></span> <span class="circle bottom-right"></span> </span> </button>
将SVG代码添加在页面的body标签中,位置没有限制:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters"> <defs> <filter id="filter-goo-1"> <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feComposite in="SourceGraphic" in2="goo" /> </filter> </defs> </svg>
从GitHub中下载的代码中还有更多的按钮点击效果,具体的使用方法可以参考文件中的demo。