这种效果稍加改造非常优雅、并且可以准确的实验触摸聚焦点。缺点是非常消耗内存。娱乐为主吧
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);
}
}
