css hover水滴涟漪效果

最新推荐文章于 2023-02-06 15:32:24 发布

大东哦哦

最新推荐文章于 2023-02-06 15:32:24 发布

阅读量822

点赞数

分类专栏： js 文章标签： css javascript

本文链接：https://blog.csdn.net/qq_36454089/article/details/106757498

版权

实现逻辑

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      width: 100%;
    }

    ul {
      width: 1400px;
      list-style: none;
      display: flex;
      justify-content: space-between;
      padding: 100px;
      margin: 0 auto;
    }

    li {
      width: 23%;
      height: 400px;
      background: rgb(98, 190, 190, .5);
      position: relativ

最低0.47元/天解锁文章

大东哦哦

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css hover水滴涟漪效果

实现逻辑1.给盒子添加遮罩层,初始大小为0,hover效果放大2.判断鼠标进入位置,上下左右四个方向3.拿到鼠标在盒子内的X/Y坐标位置,e.pageY-$(this).offset().top4.鼠标进入动画:把鼠标的X/Y轴坐标,添加给遮罩层,作为定位的left和top,并添加放大动画5.鼠标移除动画:判断出去的位置,给遮罩层添加left和top,并添加缩小动画<!DOCTYPE html...
复制链接

扫一扫