Html - 涟漪特效

这种效果稍加改造非常优雅、并且可以准确的实验触摸聚焦点。缺点是非常消耗内存。娱乐为主吧

js

//╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣  涟漪特效 ╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣
涟漪特效 = function()
{
    $('body').on('tap', function (e)
    {  

            var left = e.detail.center.x;
            var top = e.detail.center.y;

            $("body").append('<div class="dot" style="top:' + top + 'px;left:' + left + 'px;"></div>')
            setTimeout(function () {
                $('.dot:first').remove();
            }, 1500);
    });
}

css

/* 涟漪特效 */ 

.dot {
  display: block;
  height: 20px;
  width: 20px;
  background: transparent;
  border-radius: 100%;
  position: absolute;
  animation: sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-animation:sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-animation:sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-animation:sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
   background: transparent;
  z-index:;    

} 

@keyframes sploosh
{
  0% {
    box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
    background: rgba(66, 166, 223, 0.7);
  }
  100% {
    box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
    background: rgba(66, 166, 223, 0);
  }
} 

@-webkit-keyframes sploosh
{
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
    -webkit-background: rgba(66, 166, 223, 0.7);
  }
  100% {
    -webkit-box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
    -webkit-background: rgba(66, 166, 223, 0);
  }
}

@-ms-keyframes sploosh
{
  0% {
    -ms-box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
    background: rgba(66, 166, 223, 0.7);
  }
  100% {
    -ms-box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
    background: rgba(66, 166, 223, 0);
  }
}

@-moz-keyframes sploosh
{
  0% {
    box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
    background: rgba(66, 166, 223, 0.7);
  }
  100% {
    box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
    background: rgba(66, 166, 223, 0);
  }
}