css hover水滴涟漪效果

 

实现逻辑

1 . 给盒子添加遮罩层 , 初始大小为0 , hover效果放大

2 . 判断鼠标进入位置 , 上下左右四个方向

3 . 拿到鼠标在盒子内的 X/Y 坐标位置 , e.pageY - $(this).offset().top

4 . 鼠标进入动画 : 把鼠标的X/Y轴坐标 , 添加给遮罩层 , 作为定位的left和top , 并添加放大动画

5 . 鼠标移除动画 : 判断出去的位置 , 给遮罩层添加left和top , 并添加缩小动画

 





  
  
  Document

  



  

 

 

你可能感兴趣的:(js,css,javascript)