文档章节

使用CSS实现按钮点击波纹效果

Jack088
 Jack088
发布于 2018/09/13 18:10
字数 352
阅读 30
收藏 0

有的网站会为按钮添加点击波纹效果提升网站效果,我们可以简单实现一下:

主要借助::after伪类及CSS3中的transform和transition属性: 
html:

<div class="container text-center">
        <button class="btn btn-default ripple btn-lg">Button</button>
        <button class="btn btn-default ripple btn-lg">Button with very long content</button>
</div>
.ripple {
    position: relative;
    //隐藏溢出的径向渐变背景
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    //设置径向渐变
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    //设置初始状态
    transition: 0s;
}

参考链接:https://mladenplavsic.github.io/css-ripple-effect/# 
效果: 
这里写图片描述

阿里的Ant Design按钮风格也可以以这个为模板来实现:

.ripple {
    position: relative;
    //此处不需要设置overflow:hidden,因为after元素需要溢出显示
}
.ripple:focus{
    outline: none;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    //扩大伪类元素4个方向各10px
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    pointer-events: none;
    background-color: #333;
    background-repeat: no-repeat;
    background-position: 50%;
    opacity: 0;
    transition: all .3s;
}

.ripple:active:after {
    opacity: .3;
    //设置初始状态
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0s;
}

效果:

这里写图片描述

代码地址:https://github.com/justforuse/interesting-effect-collection/tree/master/ripple-effect

本文转载自:https://blog.csdn.net/u014291497/article/details/77418434

共有 人打赏支持
Jack088
粉丝 43
博文 489
码字总数 70464
作品 0
程序员
私信 提问
程序猿必备的10款超有趣的SVG绘制动画赏析

  SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们...

爱前端
2017/12/05
0
0
还原一个 Windows 10 Metro 布局

前言 Win10 Metro 相较于前一代完全扁平化风格的 Win8 Metro 在动画效果与交互体验上有了比较大的差异,那么想要实现一个较为逼真的Win10 Metro需要哪些动画效果呢? 真的是Windows 10 Metr...

yuanfux
2018/10/10
0
0
超酷的计步器APP(一)——炫酷功能实现,自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/52976877 超酷的计步器APP(一)——炫酷功能实现,自定义水波纹特效、自定义炫酷开...

Aduroidpc
2016/10/31
0
0
5.5 使用外面面板中的效果命令制作艺术文字 [Illustrator CC教程]

原文:http://coolketang.com/staticDesign/5a97b8c29f54542163da6f41.html 1. 本节课将为您演示如何在外观面板中,为图形添加多个效果属性。首先选择文档中的图形,查看图形的外观属性。 2....

fzhlee
2018/03/08
0
0
仿Google原生桌面水波纹展开收起动画实现

前言 在之前的博客android如何给整个视图view圆角显示中有提到过如何实现对View显示进行圆角裁剪,其原理其实也比较简单。这里先看看动画效果。 View负责绘制显示的draw方法 因为View的draw方...

Ihesong
2018/04/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

RocketMQ高性能之底层存储设计

说在前面 RocketMQ在底层存储上借鉴了Kafka,但是也有它独到的设计,本文主要关注深刻影响着RocketMQ性能的底层文件存储结构,中间会穿插一点点Kafka的东西以作为对比。 例子 Commit Log,一...

薛定谔的旺
21分钟前
2
0
实战:基于Spring Boot快速开发RESTful风格API接口

写在前面的话 这篇文章计划是在过年期间完成的,示例代码都写好了,结果亲戚来我家做客,文章没来得及写。已经很久没有更新文章了,小伙伴们,有没有想我啊。言归正传,下面开始,今天的话题...

JAVA_冯文议
29分钟前
1
0
Anaconda3 5.0.0中配置Python 3.6 + TensorFlow环境

参考:https://blog.csdn.net/hu_zhenghui/article/details/78156193

Pasenger
34分钟前
0
0
Nginx反向代理Tomcat配置

Nginx代理Tomcat 为什么要为Tomcat配置反向代理? 1)如果同一台机器既有nginx又有Tomcat,则会产生端口冲突2)我们需要把8080端口变成80端口3)nginx对于静态的请求速度上要优于Tomcat,T...

wzb88
47分钟前
10
0
JavaScript email邮箱/邮件地址的正则表达式及分析

在做用户注册时,常会用到邮箱/邮件地址的正则表达式。本文列举了几种方案,大家可以根据自己的项目情况,选择最适合的方案。 方案1 (常用) 规则定义如下: 以大写字母[A-Z]、小写字母[a-z]...

前端小攻略
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部