今天整理了如何用html和css實現div的緩慢移動效果這個實例：
<!DOCTYPE html>
<html>
<head>
<title>滑動</title>
<style type="text/css">
.container {
position: relative;
width: 50%;
}
.image {
display: block; /*默認顯示*/
width: 100%; /* height: auto;*/
}
.overlay {
position: absolute;
top: 100%; /*從底部何處開始滑動*/
background-color: #008CBA;
overflow: hidden; /*內容超出彈框時不顯示*/
width: 100%;
background: #ccc;
height: 100%;
transition:top 1s linear; /*設置經過1s完全覆蓋，緩慢均勻滑動*/
}
.overlay_up { /*鼠標移動到該div時，發生變化*/
top: 0; /*滑到距頂部高度為0的地方*/
}
.text { /*文本內容樣式設置*/
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*文字顯示位置*/
}
</style>
</head>
<body>
<!--下方文字緩慢上滑覆蓋圖片，並保持不動-->
<div class="container">
<img src="img/18607035278848161.jpg" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
<script>
window.onload = function(){ /*頁面加載完成后執行方法*/
var a1=document.getElementsByClassName("overlay")[0]; /*獲取元素*/
a1.setAttribute("class",a1.getAttribute("class")+" overlay_up"); /*設置屬性class*/
}
</script>