今天整理了如何用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%); /*文字显示位置*/
}
&l
最低0.47元/天 解锁文章
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
