1.先把需要移動div定位到動畫開始前的位置
<head>
<style>
.box1{
position:relative;
width: 50%;
height: 10%;
background-color: yellow;
}
.box2{
position:relative;
width: 50%;
height: 10%;
background-color: red;
}
</style>
</head>
<body>
<div style="width: 100%;height: 800px;background-color: white">
<div style="width: 100%;">
<div class="box1"><!-- 把需要移動的div定位到動畫開始前的位置 -->
box1
</div>
</div>
<div style="width: 100%;padding-left: 50%">
<div class="box2"><!-- 把需要移動的div定位到動畫開始前的位置 -->
box2
</div>
</div>
</div>
</body>
效果如圖：
2.引入juery文件
<!DOCTYPE html>
<html lang="en">
<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
<script src="jquery-3.4.1/jquery-3.4.1.min.js"></script>
<head>
<style>
.box1{
position:relative;
width: 50%;
height: 10%;
background-color: yellow;
}
.box2{
position:relative;
width: 50%;
height: 10%;
background-color: red;
}
</style>
</head>
<body>
<div style="width: 100%;height: 800px;background-color: white">
<div style="width: 100%;">
<div class="box1"><!-- 把需要移動的div定位到動畫開始前的位置 -->
box1
</div>
</div>
<div style="width: 100%;padding-left: 50%">
<div class="box2"><!-- 把需要移動的div定位到動畫開始前的位置 -->
box2
</div>
</div>
</div>
</body>
</html>
3.添加向左向右移動的js動畫代碼，在頁面加載時觸發動畫
