css之div位移变化

四、css之div位移变化

up bottom left right
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			.hover-con{margin: 100px auto;padding:0px 20px;width:90%; text-align: center;border: 1px solid #000000;}
			.ech-t,.ech-b,.ech-l,.ech-r{
			    transition: all .4s;
			    display: inline-block;
				margin: 20px;
				width: 80px;
				height: 80px;
				line-height: 80px;
				text-align: center;
				background:#0069D9;
				color: #FFFFFF;
				cursor: pointer;
			    
			}
			.ech-t:hover {
			    transform: translate3d(0, -10px, 0);
			}
			.ech-b:hover {
			    transform: translate3d(0, 10px, 0);
			}
			.ech-l:hover {
			    transform: translate3d(-10px, 0, 0);
			}
			.ech-r:hover {
			    transform: translate3d(10px, 0, 0);
			}

		</style>
	</head>
	<body>
		<div class="hover-con">
			<span class="ech-t">up</span>
			<span class="ech-b">bottom</span>
			<span class="ech-l">left</span>
			<span class="ech-r">right</span>
		</div>
	</body>
</html>

　　

posted on 2017-12-06 10:34  木之子梦之蝶  阅读(914)  评论(0)    收藏  举报

导航