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

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

}

}

发表回复

您的电子邮箱地址不会被公开。