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

html+css—仿小米商品展示

界面和实现功能

html+css---仿小米商品展示+拓展_第1张图片
hover后:
html+css---仿小米商品展示+拓展_第2张图片功能的话:就是hover之后显示

用到的知识点

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

思路

单纯的讲不好讲 看代码

代码



<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>


拓展

根据注释栏给的宽高的不一样 还有 平移后的位置不一样 可以设计n种不同的 特效
html+css---仿小米商品展示+拓展_第3张图片html+css---仿小米商品展示+拓展_第4张图片

你可能感兴趣的:(html+css---仿小米商品展示+拓展)