這是一款Material Design風(fēng)格按鈕點(diǎn)擊波動(dòng)畫效果。該按鈕設(shè)計(jì)在用戶點(diǎn)擊按鈕時(shí)，按鈕上會(huì)產(chǎn)生各種流光動(dòng)畫效果，非常炫酷。

使用方法

在頁(yè)面中引入style.css文件。

HTML結(jié)構(gòu)

該Material Design風(fēng)格按鈕點(diǎn)擊波動(dòng)畫效果中的按鈕使用

作為HTML結(jié)構(gòu)。點(diǎn)擊按鈕

為

元素添加相應(yīng)的class類，即可生成對(duì)應(yīng)的按鈕點(diǎn)擊波動(dòng)畫效果。

Wave animation

點(diǎn)擊按鈕

Slow stroke animation

點(diǎn)擊按鈕

Normal stroke animation

點(diǎn)擊按鈕

Middle bubble animation

點(diǎn)擊按鈕

Wave animation

點(diǎn)擊按鈕

Slow stroke animation

點(diǎn)擊按鈕

Normal stroke animation

點(diǎn)擊按鈕

對(duì)于按鈕的外觀和顏色，可以通過(guò)sass文件來(lái)修改：

/* transition conf */

$duration: 0.75s;

$transition-style: ease-in-out;

/* colors */

$light-blue: rgb(52, 152, 219);

$light-green: rgb(46, 204, 113);

$light-red: rgb(231, 76, 60);

$light-turquoise: rgb(26, 188, 156);

$dark-blue: rgb(41, 128, 185);

$dark-green: rgb(39, 174, 96);

/* btn conf */

$btn-width: 200px;

$btn-padding: 20px;

總結(jié)

以上是生活随笔為你收集整理的html点击波,Material Design风格按钮点击波动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。