通过鼠标悬浮实现让元素在九宫格内移动，最终回到原点。
在本案例中使用了过渡+定位+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>
效果如下：
