css通过鼠标悬浮实现元素移动

最新推荐文章于 2023-06-02 17:44:04 发布

aevmb80648

最新推荐文章于 2023-06-02 17:44:04 发布

阅读量1k

点赞数

原文链接：http://www.cnblogs.com/liujunhang/articles/10759510.html

版权

通过鼠标悬浮实现让元素在九宫格内移动，最终回到原点。
在本案例中使用了过渡+定位+opacity三个主要的知识点。
当鼠标悬浮在九宫格之上的时候，就让元素进行位置切换，但是仅仅通过定位的移动并不能一次性进行多个方向的位移，所以采用了过渡延迟+元素隐藏这样的一个小技巧，从而实现在视觉上的一个欺骗。
下面是代码分享：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跳转九宫格</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .box {
            width: 600px;
            height: 600px;
            border-top: 1px solid red;
            border-left:1px solid red;
            /* margin:40px auto; */
            position: relative;
            box-sizing: border-box;
            display: inline-block;  
        }
        /* 设置九宫格 */
        .box .table div {
            box-sizing: border-box;
            display: inline-block;
            width: 196px;
            height: 200px;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
        }
        /* 设置移动的元素 */
        .box .d1 {
            box-sizing: border-box;
            position: absolute;
            width: 196px;
            height: 200px;
            background-color: orange;
            top: 0;
            left: 0;
            transition: top 1s,left 1s 1s,opacity 1ms 2s; 
        }
        .box:hover .d1 {
            top: 200px;
            left: 200px;
            opacity: 0;
        }
        /* 第二个盒子 */
        .box .d2 {
            box-sizing: border-box;
            position: absolute;
            width: 196px;
            height: 200px;
            background-color: orange;
            top: 200px;
            left: 200px;
            
            /* 第一个盒子延迟1s 共用时两秒 所以第二个盒子应该在位移的属性上分别加上1s相对于上一个盒子 */
            transition: top 1s 2s,left 1s 3s,visibility 1s 2s,opacity 1ms 4s; 
            visibility: hidden;
        }
        .box:hover .d2 {
            visibility: visible;
            top:0;
            left: 400px;
            opacity: 0;
        }
        .box .d3 {
            box-sizing: border-box;
            position: absolute;
            width: 196px;
            height: 200px;
            background-color: orange;
            top: 0;
            left: 400px;
            visibility: hidden;
            transition: top 1s 4s,left 1s 5s,visibility 1s 4s,opacity 1ms 6s; 
        }
        
        .box:hover .d3 {
            visibility: visible;
            top: 408px;
            left: 0;
            opacity: 0;
        }
        
        .d4 {
            box-sizing: border-box;
            position: absolute;
            width: 196px;
            height: 200px;
            background-color: orange;
            top: 408px;
            visibility: hidden;
            transition: top 1s 6s,visibility 1ms 6s,opacity 1s 7s;  
        }
        .box:hover .d4 {
            visibility: visible;
            top: 0;
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <div class="d1"></div>
            <div class="d2"></div>
            <div class="d3"></div>
            <div class="d4"></div>
        </div>
        <div class="table">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

效果如下：

转载于:https://www.cnblogs.com/liujunhang/articles/10759510.html

aevmb80648

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css通过鼠标悬浮实现元素移动

通过鼠标悬浮实现让元素在九宫格内移动，最终回到原点。在本案例中使用了过渡+定位+opacity三个主要的知识点。当鼠标悬浮在九宫格之上的时候，就让元素进行位置切换，但是仅仅通过定位的移动并不能一次性进行多个方向的位移，所以采用了过渡延迟+元素隐藏这样的一个小技巧，从而实现在视觉上的一个欺骗。下面是代码分享：<!DOCTYPE html><html lang="...
复制链接

扫一扫