css部分
.shui{
width:10px;
height:10px;
background: red;
border-radius: 50%;
position:absolute;
-webkit-animation: waveCircle 1.5s infinite;
animation: waveCircle 1.5s infinite ;
}
@keyframes waveCircle {
0% {
transform:scale(2,2);
opacity: 0.5;
}
100% {
transform:scale(20,20);
opacity: 0;
}
}
@-webkit-keyframes waveCircle {
0% {
transform:scale(2,2);
opacity: 0.5;
}
100% {
transform:scale(20,20);
opacity: 0;
}
}
@-o-keyframes waveCircle /* Opera */
{
0% {
transform:scale(2,2);
opacity: 0.5;
}
100% {
transform:scale(20,20);
opacity: 0;
}
}
@-moz-keyframes waveCircle /* Firefox */
{
0% {
transform:scale(2,2);
opacity: 0.5;
}
100% {
transform:scale(20,20);
opacity: 0;
}
}
js部分
$('body').on('touchstart',function(e) {
var _touch = e.originalEvent.targetTouches[0];
var _x= _touch.pageX+5;
var _y= _touch.pageY+5;
var rippleDiv = $('<div class="shui"></div>');
rippleDiv.css({
left:_x,
top:_y,
background: "#f896c9"
}).appendTo($(".video"));
window.setTimeout(function () {
rippleDiv.remove();
}, 1500)
});