老时时彩诚信平台:用SVG給頁面上的按鈕添加個性的點擊效果

老时时彩代购投注 www.icpsj.tw 用SVG給頁面上的按鈕添加個性的點擊效果,點擊查看效果。

用SVG給頁面上的按鈕添加個性的點擊效果

代碼在GitHub上有,所以本文來看下代碼使用方式。

使用方法

首先,GitHub的右上方的“Download Zip”zip文件下載。

然后將zip文件解壓,將解壓后js文件夾中的「TweenMax.min.js」和「main.js」加在網頁的</body>前面;

<script src="js/TweenMax.min.js"></script>
<script src="js/main.js"></script>

加載css文件夾中的「main.css」樣式表;

<link href="css/main.css"/ rel="stylesheet">

HTML代碼示例:

<button id="component-1" class="button button--1">
  Click me
  <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="//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。

官方演示:Distorted Button Effects - Codrops

GitHub:GitHub – codrops/DistortedButtonEffects

最后編輯于:2017/03/14作者: 烽煙無限

發表評論