这是一款Material Design风格按钮点击波动画效果。该按钮设计在用户点击按钮时,按钮上会产生各种流光动画效果,非常炫酷。
使用方法
在页面中引入style.css文件。
<link rel="stylesheet" href="css/style.css">
HTML结构
该Material Design风格按钮点击波动画效果中的按钮使用<div>作为HTML结构。
<div class="btn wave left">点击按钮</div>
为<div>元素添加相应的class类,即可生成对应的按钮点击波动画效果。
<p>Wave animation</p>
<div class="btn wave left">点击按钮</div>
<p>Slow stroke animation</p>
<div class="btn half-stroke left">点击按钮</div>
<p>Normal stroke animation</p>
<div class="btn stroke left">点击按钮</div>
<p>Middle bubble animation</p>
<div class="btn bubble left">点击按钮</div>
<p>Wave animation</p>
<div class="btn wave right">点击按钮</div>
<p>Slow stroke animation</p>
<div class="btn half-stroke right">点击按钮</div>
<p>Normal stroke animation</p>
<div class="btn stroke right">点击按钮</div>
对于按钮的外观和颜色,可以通过sass文件来修改:
/* 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;