纯CSS3 Android样式按钮点击波特效

当前位置:主页 > CSS3库 > CSS3动画 > 纯CSS3 Android样式按钮点击波特效
纯CSS3 Android样式按钮点击波特效
分享:

    插件介绍

    css-ripple-effect是一款使用纯CSS3制作的炫酷扁平风格按钮点击波特效。该效果是仿照Android系统的Material design风格点击波来制作的。

    浏览器兼容性

    浏览器兼容性
    时间:2016-09-26
    阅读:
简要教程

css-ripple-effect是一款使用纯CSS3制作的炫酷扁平风格按钮点击波特效。该效果是仿照Android系统的Material design风格点击波来制作的。

使用方法

在页面中引入ripple.css文件。

<link href="ripple.css" rel="stylesheet">
                
HTML结构

要为一个<button>元素制作点击波特效,只需要为它添加ripple class类即可。

<button type="button" class="ripple" >Primary</button>
                
CSS样式

你可以通过ripple.css文件或ripple.less文件来修改点击波效果的样式。

.ripple {
  position: relative;
  overflow: hidden;
  &:after {
    content: "";
    background: rgba(255,255,255,0.3);
    display: block;
    position: absolute;
    border-radius: 50%;
    padding-top: 240%;
    padding-left: 240%;
    margin-top: -120%;
    margin-left: -120%;
    opacity: 0;
    transition: all 1s;
  }
  &:active:after {
    padding-top: 0;
    padding-left: 0;
    margin-top: 0;
    margin-left: 0;
    opacity: 1;
    transition: 0s;
  }
}
                

该扁平风格点击波动画特效的github地址为:https://github.com/mladenplavsic/css-ripple-effect

网友评论