android按钮扁平,纯CSS3 Android样式按钮点击波特效

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

使用方法

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

HTML结构

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

Primary

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;

}

}