按钮点击效果(水波纹)_css

按钮点击效果(水波纹)_javascript_02

​



<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>按钮水波纹</title>
    <style type="text/css">
      * {
        box-sizing: border-box;
        outline: none;
      }

      body {
        font-family: 'Open Sans';
        font-size: 100%;
        font-weight: 300;
        line-height: 1.5em;
        text-align: center;
      }

      .btn {
        border: none;
        display: inline-block;
        color: white;
        overflow: hidden;
        margin: 1rem;
        padding: 0;
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
      }

      .btn.color-1 {
        background-color: #426fc5;
      }

      .btn-border.color-1 {
        background-color: transparent;
        border: 2px solid #426fc5;
        color: #426fc5;
      }

      .material-design {
        position: relative;
      }

      .material-design canvas {
        opacity: 0.25;
        position: absolute;
        top: 0;
        left: 0;
      }

      .container {
        align-content: center;
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto;
        max-width: 46rem;
      }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var canvas = {},
          centerX = 0,
          centerY = 0,
          color = '',
          containers = document.getElementsByClassName('material-design'),
          context = {},
          element = {},
          radius = 0,
          // 根据callback生成requestAnimationFrame动画
          requestAnimFrame = function() {
            return(
              window.requestAnimationFrame ||
              window.mozRequestAnimationFrame ||
              window.oRequestAnimationFrame ||
              window.msRequestAnimationFrame ||
              function(callback) {
                window.setTimeout(callback, 1000 / 60);
              }
            );
          }(),
          // 为每个指定元素生成canves
          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 += 2;
            // 通过判断半径小于元素宽度，不断绘制 radius += 2 的圆形
            if(radius < element.width) {
              requestAnimFrame(draw);
            }
          };

        init();
      }
    </script>
  </head>

  <body>
    <a class="btn color-1 material-design" data-color="#2f5398">Press me!</a>
  </body>

</html>


　　按钮点击效果(水波纹)_ide_03



<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JS</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <script type="text/javascript" src="js/jquery-3.2.0.js"></script>
        <style type="text/css" media="screen">
            ul {
                font-size: 0;
                position: relative;
                padding: 0;
                width: 480px;
                margin: 40px auto;
                user-select: none;
            }

            li {
                display: inline-block;
                width: 160px;
                height: 60px;
                background: #E95546;
                font-size: 16px;
                text-align: center;
                line-height: 60px;
                color: white;
                text-transform: uppercase;
                position: relative;
                overflow: hidden;
                cursor: pointer;
            }

            .slider {
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 4px;
                background: #1685D3;
                transition: all 0.5s;
            }

            .ripple {
                width: 0;
                height: 0;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.4);
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                transform: scale(0);
                position: absolute;
                opacity: 1;
            }

            .rippleEffect {
                -webkit-animation: rippleDrop .4s linear;
                animation: rippleDrop .4s linear;
            }

            @-webkit-keyframes rippleDrop {
                100% {
                    -webkit-transform: scale(2);
                    transform: scale(2);
                    opacity: 0;
                }
            }

            @keyframes rippleDrop {
                100% {
                    -webkit-transform: scale(2);
                    transform: scale(2);
                    opacity: 0;
                }
            }
        </style>

    </head>

    <body>
        <ul>
            <li>项目一</li>
            <li>项目二</li>
            <li>项目三</li>
            <li class="slider"></li>
        </ul>
    </body>
    <script>
        $("ul li").click(function(e) {

            if($(this).hasClass('slider')) {
                return;
            }

            var whatTab = $(this).index();

            var howFar = 160 * whatTab;

            $(".slider").css({
                left: howFar + "px"
            });

            $(".ripple").remove();

            var posX = $(this).offset().left,
                posY = $(this).offset().top,
                buttonWidth = $(this).width(),
                buttonHeight = $(this).height();
            console.log(posX, posY, buttonWidth, buttonHeight)

            $(this).append("<span class='ripple'></span>");

            if(buttonWidth >= buttonHeight) {
                buttonHeight = buttonWidth;
            } else {
                buttonWidth = buttonHeight;
            }

            var x = e.pageX - posX - buttonWidth / 2;
            var y = e.pageY - posY - buttonHeight / 2;

            $(".ripple").css({
                width: buttonWidth,
                height: buttonHeight,
                top: y + 'px',
                left: x + 'px'
            }).addClass("rippleEffect");

        });
    </script>

</html>