点击按钮有水纹效果~~

最新推荐文章于 2023-03-21 11:39:46 发布

转载最新推荐文章于 2023-03-21 11:39:46 发布 · 550 阅读

学习笔记专栏收录该内容

19 篇文章

订阅专栏

点击按钮有水纹效果~~

奉上源码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<style>
    .btn {
      background: #ffab91;

      display: block;
      padding: 1em;
      text-decoration: none;
      width: 200px;
      height: 20px;
      position: relative;
      overflow: hidden;
    }

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

    .dh {
      animation: ldm 0.8s ;
      -moz-animation: ldm 0.8s ;
      -o-animation: ldm 0.8s ;
      -webkit-animation: ldm 0.8s ;
    }

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

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

<body style=" background: #aaab91;">
<div class="btn">
    <span class="ripple"></span> adasdsd
</div>
<script src="jquery-1.7.2.js"></script>
<script>
    $(".btn").click(function(e){
       $(this).find(".ripple").removeClass("dh");
      var R=6;
      R= parseInt($(this).outerWidth());
      if(parseInt($(this).outerWidth())<parseInt($(this).outerHeight())){
        R= parseInt($(this).outerHeight());
      }
      $(this).find(".ripple").css({"width":(R*2)+"px","height":(R*2)+"px"});
    $(this).find(".ripple").css({"left":(e.pageX-$(this).position().left-R)+"px","top":(e.pageY-$(this).position().top-R)+"px" });
    // $(this).find(".ripple").css({"left":(e.pageX-$(this).position().left-R/2 )+"px","top":(e.pageY-$(this).position().top-R/2 )+"px" });
    $(this).find(".ripple").addClass("dh");
    });
</script>
</body>

</html>