2018-1-18 如何用html和css实现div的缓慢移动效果

　　今天整理了如何用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>

　　

posted @ 2018-01-18 20:24  凉冰婵  阅读(5837)  评论(0)    收藏  举报