html5 +css3 点击后水波纹扩散效果
2018-09-13 18:08
686 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>html5+ js +css3 点击后水波纹扩散效果 兼容移动端-幸凡学习网</title> <style> body { margin: 0; padding: 0; } .center { text-align: center } .btn { position: relative; width: 13em; height: 3em; margin: 2em; border: none; outline: none; letter-spacing: .2em; font-weight: bold; background: #999; cursor: pointer; overflow: hidden; user-select: none; border-radius: 2px; color: #fff; } button:nth-child(2) { background: #4285f4; } button:nth-child(3) { background: #00bad2; } button:nth-child(4) { background: #ff8a80; } button:nth-child(5) { background: #ffae00; } button:nth-child(6) { background: #aec156; } button:nth-child(7) { background: #a060a8; } button:nth-child(8) { background: #a78660; } button:nth-child(9) { background: #5da065; } button:nth-child(10) { background: #5e6b9a; } button:nth-child(11) { background: #9a5e5e; } button:nth-child(12) { background: #666; } .ripple { position: absolute; background: rgba(0, 0, 0, .15); border-radius: 100%; transform: scale(0); pointer-events: none; } .ripple.show { animation: ripple .75s ease-out; } @keyframes ripple { to { transform: scale(2); opacity: 0; } } </style> </head> <body><h1 class="center">html5 +css3 点击后水波纹扩散效果 兼容移动端</h1> <div class="main center"> <button class="btn">BUTTON</button> <button class="btn">BUTTON </button> <button class="btn">BUTTON</button> <button class="btn">BUTTON </button> <button class="btn">BUTTON</button> <button class="btn">BUTTON </button> <button class="btn">BUTTON</button> <button class="btn">BUTTON </button> <button class="btn">BUTTON</button> <button class="btn">BUTTON </button> <button class="btn">BUTTON</button> <button class="btn">BUTTON </button> </div> <script> var addRippleEffect = function (e) { var target = e.target; if (target.className.toLowerCase() !== 'btn') return false; var rect = target.getBoundingClientRect(); var ripple = target.querySelector('.ripple'); if (!ripple) { ripple = document.createElement('span'); ripple.className = 'ripple' ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px' target.appendChild(ripple); } ripple.classList.remove('show'); var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop; var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft; ripple.style.top = top + 'px'; ripple.style.left = left + 'px'; ripple.classList.add('show'); return false; } document.addEventListener('click', addRippleEffect, false); </script> </body> </html>
相关文章推荐
- Android实现控件点击波纹扩散效果
- 为什么我的Material Design风格列表点击时没有波纹扩散效果
- Android 点击水波纹扩散效果( Ripple Effect )
- js点击按钮实现水波纹效果代码(CSS3和Canves)
- Android L中水波纹点击效果的实现
- [HTML5-SVG]使用raphaeljs:代替css3绘制opera图标效果
- 如何让图片点击有水波纹效果?
- 使用CSS实现按钮点击波纹效果
- android点击波纹效果
- 以动画实现 水波纹扩散效果.
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
- View的点击效果-水波纹
- 自定义Drawable 实现波纹扩散效果
- Android实现点击Button产生水波纹效果
- 【HTML5学习笔记】28:CSS3文本效果
- CSS3点击按钮实现背景渐变动画效果
- 【HTML5学习笔记】33:CSS3过渡效果
- css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版
- 基于HTML5+css3的数字反转切换效果
- lenove 4.0.3webview加载html5页面点击效果问题