html+css---仿小米商品展示+拓展

最新推荐文章于 2025-05-24 17:29:49 发布

忽然呀

最新推荐文章于 2025-05-24 17:29:49 发布

阅读量7.4k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/javasvince/article/details/89069904

本文介绍了一种使用HTML5和CSS3实现的小米商品展示效果。通过transform和transition属性，当鼠标悬停在商品上时，会显示商品的标题和描述。文章提供了完整的代码示例，并介绍了figure和figcaption标签的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html+css—仿小米商品展示

界面和实现功能

在这里插入图片描述
hover后：
功能的话：就是hover之后显示

用到的知识点

transform （2D/3D转换）和 transition (过渡)
transform的 translate（平移属性）
用法：transform:translate(10px,10px); //向右向下为正
//transform有其他属性 http://www.runoob.com/cssref/css3-pr-transform.html
transition:要过渡的属性时间; //要过渡的属性无特别要求 all 时间一定带单位s
figure以及figcapation标签（html5语义化标签语义化更具可读性）
figure标签用于规定独立的流内容 (图片等)
figcaption标签和firgure配套用于定义figure元素标题
opacity ------不透明度（取值 0-1）默认为1（完全不透明） 0 完全透明

思路

单纯的讲不好讲看代码

代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页动态提示</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			figure{
				position: relative;
				overflow: hidden;         /* 小技巧  平移在下面 让注释隐藏  */
				float: left;
				height: 334px;
			}
			figcaption{
				position: absolute;
				bottom: 0px;
				font-family: "微软雅黑";
				color:#fff;
				transition: all 0.5s;
			}
			figcaption{
				width:100%;
				text-align: center;
				opacity: 0.3;
				background-color: #000;
				transform: translate(0px,130px);       /*第二步 样式 利用平移将注释走  */
			}
			figure:hover figcaption{
				transform: translate(0px,0px);       /*第三步 poiot hover之后平移回来 */
			}
		</style>
	</head>
	<body>
		<figure class="test1"> 
			<img src="01.jpg" alt="">
			<figcaption>
				<h1>图片标签</h1>
				<p>图片注解</p>               <!--第一步 结构  给大盒子用相对定位  给注释用到绝对定位-->
			</figcaption>
		</figure>
	</body>
	
</html>