html+css---仿小米商品展示+拓展
2019-04-07 15:13
609 查看
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> 20000 <h1>图片标签</h1> <p>图片注解</p> <!--第一步 结构 给大盒子用相对定位 给注释用到绝对定位--> </figcaption> </figure> </body> </html>
拓展
根据注释栏给的宽高的不一样 还有 平移后的位置不一样 可以设计n种不同的 特效
相关文章推荐
- html+css一个展示图片的盒子
- html+css图片展示
- Css Html 鼠标移上标签展示图表
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- Html+Css新手简单快速仿京东商品分类导航
- html+css实现数据图表的展示效果
- CSS:淘宝商品展示样式
- web开发之纯css制作小米官网产品展示
- 仿小米手风琴 HTML +CSS +JS开发
- html+css+js开发oppo音乐展示特效
- 仿小米商品展示
- 高德地图WEB版基础控件展示[原创]_CSS/HTML_脚本之家
- HTML CSS写商品详情放大镜效果
- 利用css与html生成瀑布流图片展示
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- html+css实现3D旋转图片展示
- html+css实现图片展示桌面
- HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法
- html+css实现爱奇艺图片展示
- 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范(转)