请问 Material Design 水波纹效果如何实现？ -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

阿里云APP内打开

请问 Material Design 水波纹效果如何实现？

请问如何使用原生js, CSS实现MD的水波纹效果呢？就是点击按钮会出现波纹。
像这样

https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input

我看了一些material design的网站，审查元素，并没有找到确切的答案。

请问原理是怎样的呢？

展开

收起

杨冬芳 2016-06-07 15:45:23 2439 0

1 条回答

写回答

取消提交回答

杨冬芳

IT从业

我找了一个常用的Material Design风格的页面框架（比较漂亮的一个），看了他的按钮：http://materializecss.com/buttons.html
在默认情况下：

看到了没有，它在按钮里面添加了一个div，这个div是圆形的绝对定位的，然后在按钮里面慢慢变大，就形成了Material Design风格的波纹效果。

2019-07-17 19:30:21

赞同展开评论打赏

相关问答

移动端框架material components是什么啊？

168

1

0

移动端框架中关于Change the UI using Themes的代码是什么啊？

72

1

0

Navigation的基础是什么呢?

311

1

0

非布局控件如何实现 performLayout？

147

1

0

布局控件如何实现 performLayout？

126

1

0

请问有使用 antd.design 的吗？Table 组件，如何实现多行，可编辑

4650

1

0

ios statusbar背景透明能看到下层view的数据

1678

1

0

关于 ios leaves pdf 的缩放功能的问题

1414

1

0

ios开发中如何用StoryBoard实现侧边栏？？

1636

1

0

有哪些好用的在线 Material Design 颜色生成工具？

1895

1

0

问答排行榜

最热

最新

1 通过阿里云代备案系统进行个人快速备案 2689235

2 【大咖问答】对话PostgreSQL 中国社区发起人之一，阿里云数据库高级专家德哥 1692064

3 据说在家办公的程序员是这样写代码的？ 1671354

4 《阿里云服务器从入门到精通》—论坛精华帖汇总 1063483

5 阿里云开放端口权限 684448

6 《阿里云服务器从入门到精通》—论坛精华帖汇总（2013.8.21更新） 596153

7 如何升级配置 533177

8 【藏经阁一起读（27）】本周推荐《Apache Flink案例集（2022版）》，你有哪些心得？ 509352

9 【精品问答】python技术1000问(1) 509002

10 Flink Forward Asia 2021 有奖问答 506753

11 Linux Bash严重漏洞修复紧急通知（已全部给出最终修复方案） 452400

12 OceanBase 使用动画（持续更新） 354939

13 阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本 324337

14 OSS存储服务-客户端工具 317812

15 企业邮箱发送邮件时，若出现投递失败产生退信，内容提示包含如下： the mta server of * reply:550 failed to meet SPF requirements 或者 the mta server of 163.com — 163mx01.mxmail.netease.com(220.181.14.141) reply:550 MI:SPF mx14,QMCowECpA0qTiftVaeB3Cg—.872S2 1442548128 http://mail.163.com/help 297214

16 Win Server 2003-2016 加密勒索事件必打补丁合集 292103

17 为体验实验室取一个新名字。 287912

18 FLASH播放器，在IE浏览器下显示请确定您的域名已完成备案和CNAME绑定 277686

19 安全组详解，新手必看教程 274185

20 【史上最详细】阿里云ECS安装wordpress教程 270986

1 请问什么是 OSS 生命周期管理？如何利用生命周期管理来帮助降低 OSS 存储成本？ 155

2 请问OSS 提供哪些数据加密的方式？ 146

3 请问如何控制存储在 OSS 中数据的访问权限？ 161

4 请问数据存储在 OSS 上安全吗？ 140

5 请问如果其他账号访问我的 OSS 资源，应该如何付费？ 259

6 模型训练 103

7 请问JS里面如何把时间戳转换为日期格式 371

8 请问如果目标表没有指定主键，PolarDB-X拆分规则是什么？ 267

9 阿里云实验ECS服务器部署MySQL数据库没有权限创建数据库 176

10 sparksql中cte物化方式是怎样的 115

11 数据库压测，有哪位大神做过啊？ 133

12 麻烦大佬帮忙看下. k8s operator 1.6.1 pod网络故障导致整个网卡不可用这个可 119

13 请教大家个问题:pg数据库突发性能衰减，每个sql的执行时间都为正常情况的数倍，每个pg查询进程的c 163

14 通过控制台部署go项目时，go mod tidy超时怎么办？ 169

15 我看你们这里分页是有接口可以查的，这里的接口没有暴露给用户使用吗？ 147

16 我要获取函数调用记录及耗时，以及调用期间的资源消耗，有相关的sdk吗 126

17 一键部署完成后，函数测试出现这个错误，有解决方法吗？用的是这个地址的代码：https: 117

18 fc可以验证jwt吗？ 154

19 puppeteer的demo启动失败。。 Failed to launch the browser 165

20 代码包大小在50-100M中间时，使用fun deploy报错MODULE_NOT_FOUND 我 129

推荐问答

乘风问答官招募中！机械键盘免费拿

相关电子书

更多

低代码开发师（初级）实战教程

立即下载

阿里巴巴DevOps 最佳实践手册

立即下载

冬季实战营第三期：MySQL数据库进阶实战

立即下载