小米商品效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.mi{
				width: 234px;
				height: 300px;
				border: 1px solid rgba(0,0,0,0.5);
				margin: 100px auto;
				float: left;
				margin: 20px;
				position: relative;
				transition: all 0.5s;
				top: 0;
				overflow: hidden;
			}
			.mi .bot{
				width: 234px;
				height: 75px;
				background: #FF7600;
				position: absolute;
				bottom: 0;
				top: 300px;
				opacity: 0;
				transition: all 0.5s;
			}
			.mi:hover{
				top: -10px;
				box-shadow:0 0 10px 10px rgba(0,0,0,0.05);
			}
			.mi:hover .bot{
				opacity: 1;
				top: 225px;
			}
		</style>
	</head>
	<body>
		<div class="mi">
			<div class="bot"></div>
		</div>
		
		<div class="mi">
			<div class="bot"></div>
		</div>
		
		<div class="mi">
			<div class="bot"></div>
		</div>
		
		<div class="mi">
			<div class="bot"></div>
		</div>
	</body>
</html>

 

 

posted @ 2018-08-21 18:04  webxy  阅读(146)  评论(0)  编辑  收藏  举报