HTML5?

這是一組效果非常炫酷的HTML5 svg和CSS3鼠標點擊按鈕特效。這組鼠標點擊特效共有22種效果，大多數是在偽元素上使用CSS3 animations來製作動畫效果。非常適合於移動手機APP上的按鈕觸摸特效。

請注意這些效果需要在支持這些CSS屬性的現代瀏覽器中才有效果，IE10不支持在偽元素上使用animation，因此有些效果可能不會有效果。

該鼠標點擊按鈕特效插件中使用了Font Awesome字體圖標。

工具/原料

HTML5 SVG和CSS3

方法/步驟

HTML結構

該鼠標點擊按鈕特效中每一個可點擊的元素都是一個按鈕

CSS樣式

以下是該css3點擊按鈕特效的通用CSS樣式：

插件中通過在點擊按鈕時使用javascript來為它添加相應的動畫CLASS來執行動畫效果：

上面的CSS代碼可以生成如下圖的動畫效果：

在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一個transition。這個效果只能在Chrome瀏覽器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path屬性，這個效果也需要瀏覽器的支持才能看得到的。