css涟漪光圈扩散_css涟漪点击效果(此博客仅供个人记录使用)

//点击涟漪效果

document.addEventListener('DOMContentLoaded',function(){

let duration= 750;//样式string拼凑

let forStyle = function(position){

let cssStr= ''

for( let key inposition){//if(position.hasOwnProperty(key)){

cssStr += key+':'+position[key]+';'

//}

}returncssStr;

}//获取鼠标点击位置

let forRect = function(target){

let position={

top:0,

left:0}

let ele=document.documentElementtypeof target.getBoundingClientRect != 'undefined' && (position =target.getBoundingClientRect())return{

top: position.top+ window.pageYOffset -ele.clientTop,

left: position.left+ window.pageXOffset -ele.clientLeft

}

}

let show= function(event){

let