Material Design风格按钮点击波动画效果

当前位置:主页 > CSS3库 > CSS3动画 > Material Design风格按钮点击波动画效果
Material Design风格按钮点击波动画效果
分享:

    插件介绍

    这是一款Material Design风格按钮点击波动画效果。该按钮设计在用户点击按钮时,按钮上会产生各种流光动画效果,非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:11-02
    阅读:
简要教程

这是一款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;