css实现波纹回弹

比如直接点击一个盒子，让他的背景像波纹一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标点击按钮呈现水波扩散效果</title>

<link href="css/style.css" type="text/css" rel="stylesheet" />
<style>

.coupon {
    position: relative;
}
.coupon canvas {
    opacity: 0.25;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
</head>
<body>

    <li  class="coupon" data-color="#ee5600" onclick="lionclick()" tapmode="activeon">不论白天黑夜，在风驰电掣的旅客列车。</li>

<script type="text/javascript" >
var canvas = {},
    centerX = 0,
    centerY = 0,
    color = '',
    containers = document.getElementsByClassName('coupon')
    context = {},
    element = {},
    radius = 0,

    requestAnimFrame = function () {
      return (
        window.requestAnimationFrame       || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function (callback) {
          window.setTimeout(callback, 1000 / 60);
        }
      );
    } (),

    init = function () {
      containers = Array.prototype.slice.call(containers);
      for (var i = 0; i < containers.length; i += 1) {
        canvas = document.createElement('canvas');
        canvas.addEventListener('click', press, false);
        containers[i].appendChild(canvas);
        canvas.style.width ='100%';
        canvas.style.height='100%';
        canvas.width  = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
      }
    },

    press = function (event) {
      color = event.toElement.parentElement.dataset.color;
      element = event.toElement;
      context = element.getContext('2d');
      radius = 0;
      centerX = event.offsetX;
      centerY = event.offsetY;
      context.clearRect(0, 0, element.width, element.height);
      draw();
    },

    draw = function () {
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = color;
      context.fill();
      radius += 8;
      if (radius < element.width) {
        requestAnimFrame(draw);
      }
    };

init();
</script>
</body>
</html>
css实现波纹回弹

css实现波纹回弹

猜你喜欢
