简单jquery点击水波扩散效果,支持自定义颜色

ripple

简单jquery点击水波扩散效果,支持自定义背景颜色

代码非常简单,实现原理是点击后添加一个div,通过css3放大实现效果!

HTML

<div class="box">
<ul>
<!-- data-ripple-background值为点击后的过度背景颜色 -->
<li ripple="ripple" data-ripple-background='#8AFF00'>木</li>
<li ripple="ripple" data-ripple-background='#ff0000'>木</li>
<li ripple="ripple" data-ripple-background='#00FFFA'>博</li>
<li ripple="ripple" data-ripple-background='#000'>客</li>
</ul>
</div>

CSS

position: absolute;
z-index: 2;
width: 12px;
height: 12px;
border-radius: 100%;
overflow: hidden;
-webkit-animation:ripple 1.6s;
animation:ripple 1.6s;
}

@-webkit-keyframes ripple {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.2;
}
100% {
-webkit-transform: scale(100);
transform: scale(100);
opacity: 0;
}
}

@keyframes ripple {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.2;
}
100% {
-webkit-transform: scale(100);
transform: scale(100);
opacity: 0;
}
}

jQuery

$('[ripple]').on('click',function(e){
var rippleDiv = $('<div class="ripple"></div>');
pOffset = $(this).offset();
rippleX = e.pageX - pOffset.left;
rippleY = e.pageY - pOffset.top;
ripple = $('.ripple');

rippleDiv.css({
left:rippleX - ripple.width() / 2,
top:rippleY - ripple.height() / 2,
background: $(this).attr('data-ripple-background')
}).appendTo($(this));

window.setTimeout(function () {
rippleDiv.remove();
}, 1500)
})

贴出来的只是主要代码,全部代码请下载演示效果页面!
????

标签: