<!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>

html5 +css3 点击后水波纹扩散效果 兼容移动端的更多相关文章

  1. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  2. 很实用的HTML5+CSS3注册登录窗体切换效果

    1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果 <!DOCTYPE html><!--[if lt IE 7 ]> <html lang=" ...

  3. 用HTML5 Canvas 做擦除及扩散效果

    2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

  4. javascript+html5+css3下拉刷新 数据效果

    文章摘自:suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html segmentfault.com/a/11900 ...

  5. UWP：使用Composition实现类似安卓的水波纹Ripple效果

    先放效果图: 首先,建立一个RippleHelper.cs文件,然后建立以下附加属性: IsFillEnable:是否扩大到整个控件 RippleDuration:持续时间 RippleRadius: ...

  6. css3动画水波纹、波浪

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML5/CSS3实现添加锁屏效果

     锁屏效果,也就是将屏幕置于模态,不允许用户触发任何动作,只能解除锁定后才能继续使用,jQueryUI的dialog有模态对话框,这一点不难做到.那么,首先需要在页面中添加一个div层,用于做模态的层 ...

  8. Android 水波纹点击效果(Ripple Effect)

    上周Android发布了Android M的Preview版本.但想必Android5.0很多炫酷效果,多数开发者还没有使用过,那更不要说广大用户了. 本文介绍的是Android5.0中其中一个炫酷的 ...

  9. Android水波纹特效的简单实现

    我的开源页面指示器框架 MagicIndicator,各位一定不要错过哦. 水波纹特效,想必大家或多或少见过,在我的印象中,大致有如下几种: 支付宝 "咻咻咻" 式 流量球 &qu ...

随机推荐

  1. 第一阶段Spring个人总结

    通过这一阶段的冲刺,我感到的是名义上的团队,而实际上却是一个人的事,每个人跟每个人都不一样,都有自己的特点,总会出些不必要的麻烦. 还有团队的进展也是看不到什么东西,说实话,这次我并没有太多关注团队的 ...

  2. java 面试 -- 4

    Java面试知识点总结   本篇文章会对面试中常遇到的Java技术点进行全面深入的总结,帮助我们在面试中更加得心应手,不参加面试的同学也能够借此机会梳理一下自己的知识体系,进行查漏补缺(阅读本文需要有 ...

  3. "1001. A+B Format (20)" 解题报告

    Github : git@github.com:Circlecos/object-oriented.git PDF Of Markdown : "1001. A+B Format (20)& ...

  4. 图层损坏 E/ArcGIS﹕ The map or layer has been destroyed or recycled. 资源未释放

    看到论坛上有个网友和我一样的问题: The map or layer has been destroyed or recyled t Hello, I have a problem when the ...

  5. 团队作业4——第一次项目冲刺（Alpha版本）2017.11.18

    1.当天站立式会议照片 本次会议在5号公寓312召开,本次会议内容:①:熟悉每个人想做的模块.②:根据老师的要求将项目划分成一系列小任务.③:在上次会议内容完成的基础上增加新的任务. 2.每个人的工作 ...

  6. TCP系列55—拥塞控制—18、其他拥塞控制算法及相关内容概述

    前面我们演示分析了100+个wireshark TCP实例,拥塞控制部分也介绍常见的拥塞处理场景以及4种拥塞撤销机制,但是我们一直使用的都是reno拥塞控制算法.实际上拥塞控制发展到今天已经有了各种各 ...

  7. 深入理解JAVA集合系列一：HashMap源码解读

    初认HashMap 基于哈希表(即散列表)的Map接口的实现,此实现提供所有可选的映射操作,并允许使用null值和null键. HashMap继承于AbstractMap,实现了Map.Cloneab ...

  8. C++获取private的变量-偷走private

    private提供了对数据的封装,使得private成员只能被类自身的成员函数以及类的友元访问,其他的函数或者类想要访问private成员只能通过该类所提供的set和get的方法进行访问, 或者返回其 ...

  9. Alpha阶段敏捷冲刺①Scrum 冲刺博客

    第 1 篇 Scrum 冲刺博客对整个冲刺阶段起到领航作用,应该主要包含三个部分的内容: 各个成员在 Alpha 阶段认领的任务 成员 任务 张晨晨 完成界面设计(前端) 黄登峰 完成界面设计(前端) ...

  10. 结队第二次作业——WordCount进阶需求

    结队第二次作业--WordCount进阶需求 博客地址 051601135 岳冠宇 博客地址 051604103 陈思孝 博客地址 Github地址 具体分工 队友实现了爬虫功能,我实现了wordco ...