使用CSS实现按钮点击波纹效果
来源:互联网 发布:c语言字符串想加 编辑:程序博客网 时间:2024/05/28 23:22
有的网站会为按钮添加点击波纹效果提升网站效果,我们可以简单实现一下:
主要借助::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
Google的Material Design风格的按钮除了有波纹效果,还会根据点击位置设置波纹中心,这就需要JS来介入了,可以参考这个demo:https://codepen.io/jh3y/pen/EKGXEY
阅读全文
0 0
- 使用CSS实现按钮点击波纹效果
- 按钮点击效果(波纹)
- RippleView(波纹按钮)的效果实现
- Android 设置主题实现点击波纹效果
- Android 设置主题实现点击波纹效果
- Android之实现点击波纹效果
- Android实现控件点击波纹扩散效果
- Android 设置主题实现点击波纹效果
- 布局视图实现点击波纹效果
- 波纹按钮点击特效
- css3按钮波纹效果
- android点击波纹效果
- design点击波纹效果
- android如何实现按钮的点击水波纹效果:
- Android L中水波纹点击效果的实现
- Android L中水波纹点击效果的实现
- Android L中水波纹点击效果的实现
- Android L中水波纹点击效果的实现
- Django 点滴记录
- Steed:存储树结构数据的分析型数据库
- Java Notes 00
- 苹果终端wifi图标点亮慢和portal弹窗机制分析以及处理办法和建议经验案例
- 使用PowerDesigner进行数据库建模入门
- 使用CSS实现按钮点击波纹效果
- Jquery--JSON转化
- [bzoj 1487] 无归岛
- 戴尔PowerEdge RAID控制卡使用示例(PERC H710P为例)
- 设计模式1-策略模式1
- .net组成部分介绍
- 有关扑克的程序
- 常用dos命令/jdk环境变量配置
- keil C51 重定向printf到串口