Html - 涟漪特效

Posted 2020-07-06 贝尔塔猫

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

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:9999;    
  
} 


@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);
  }
}