CSS3 transition 属性实现小米商城商品展示效果

最新推荐文章于 2023-06-05 21:35:44 发布

清风夜半～

最新推荐文章于 2023-06-05 21:35:44 发布

阅读量4.5k

点赞数 5

分类专栏： web前端

本文链接：https://blog.csdn.net/im_dogg/article/details/80841447

版权

web前端专栏收录该内容

16 篇文章 3 订阅

订阅专栏

前端小白一个，最近学习了CSS3的transition属性，就想做一个效果练练手，下面是参考小米商城的商品展示做的一个动态效果。

下面贴上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米商品展示css3动画</title>
		<style>
			
			*{
				margin: 0;
				padding: 0;
			}
			
			body{
				background-color: #F5F5F5;
			}
	
			#box .box-con{
				width: 294px;
				height: 375px;
				background-color: white;
			}
			
			#box .box-con .new{
				width: 80px;
				height: 25px;
				background-color: #83c44e;

				margin-left: 106px;
				color: white;
				line-height: 25px;
				font-size: 14px;
				text-align: center;
			}
			
			#box .box-con a img{
				max-width: 150px;
				display: block;
				margin-bottom: 28px;
				margin-top: 50px;
				margin-left: 70px;
				
			}
			
			#box .box-con a.name{
				
				margin-top: 25px;
				margin-left: 97px;
				text-align: center;
				text-decoration: none;
				color: #000000;
			}
			
			#box .box-con p{
				margin-top: 1px;
				margin-left:10px;
				color: #B0B0B0;
				font-size: 13px;
				text-align: center;
			}
			
			#box .box-con .price{
				
				margin-top: 10px;
				margin-left: 129px;
				color: #FF6700;
				font-size: 13px;
			}
			
			#box .box-con .say{
				
				background-color: #FF6700;
				/*width:294px ;
				height: 95px;*/
				position: absolute;
				bottom: 24px;
				width:0px ;
				height: 1px;
				transition: all 0.5s;
			}
			
		
			#box{
				position: relative;
				width: 294px;
				height: 375px;
				/*outline: 1px solid black;*/
				margin: 150px auto;
				transition: margin-top 0.5s;
				transition: all 0.5s;
			}
			
			
			#box:hover .say{
				border: 1px solid red;
				width: 294px;
				height: 95px;
				right: 0px;
				bottom: 0px;
				background-image: url(http://i4.bvimg.com/651693/82fb1226524cbca7.gif);
			}
			
			#box:hover{
				margin-top: 145px;
				box-shadow: 0px 0px 25px  rgba(46,46,46,0.2);
				
			}
			
			
		</style>
	</head>
	<body>

		<div id="box">
			<div class="box-con">
				<div class="new">新品</div>
				<a href=""> <img src="http://i4.bvimg.com/651693/2c5c372c75630066.jpg" /></a>
				<a href="" class="name">米家感应夜灯</a>
				<p>超低功耗，亮度双档调节，可贴可挂</p>
				<div class="price">49元</div>
				<div class="say">
					
				</div>

			</div>
		</div>
	</body>
</html>

清风夜半～

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
1
评论
CSS3 transition 属性实现小米商城商品展示效果

前端小白一个，最近学习了CSS3的transition属性，就想做一个效果练练手，下面是参考小米商城的商品展示做的一个动态效果。下面贴上代码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;小米商品展示css3动画&lt;/title&gt; &am
复制链接

扫一扫