您的位置:首页 > Web前端 > CSS

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

2019-04-07 15:13 609 查看

html+css—仿小米商品展示

界面和实现功能


hover后:
功能的话:就是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 完全透明

思路

单纯的讲不好讲 看代码

代码

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

20000
<h1>图片标签</h1>
<p>图片注解</p>               <!--第一步 结构  给大盒子用相对定位  给注释用到绝对定位-->
</figcaption>
</figure>
</body>

</html>

拓展

根据注释栏给的宽高的不一样 还有 平移后的位置不一样 可以设计n种不同的 特效

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: