CSS3 分类菜单效果
124 浏览量
2020-12-13
22:54:51
上传
评论
收藏 152KB PDF 举报
CSS3 分类菜单效果分类菜单效果
CSS3 分类菜单效果如下所述：
HTML
<html>
<head>
<title></title>
<style type="text/css">
#bg { width: 1270px; height: 751px; margin: 0 auto; background: url("images/bg.jpg") no-repeat; }
.sblock { width: 800px; height: 250px; margin: 0 auto;}
/*.sblock { transform:translateY(65%); }*/
.sblock > div { width: 200px; height: 250px; margin: 0 auto; }
.sb1 { padding-top: 170px; }
.sb2 { padding-top: 30px; }
.sblock div:hover { transform: translateY(-10px); }
.sblock div { transition:all 0.5s; }
.sb1 > div:nth-of-type(1) { float: left; background: url("images/1.jpg") no-repeat; }
.sb1 > div:nth-of-type(2) { float: left; background: url("images/2.jpg") no-repeat; }
.sb1 > div:nth-of-type(3) { float: left; background: url("images/3.jpg") no-repeat; }
.sb1 > div:nth-of-type(4) { float: left; background: url("images/4.jpg") no-repeat; }
.sb2 > div:nth-of-type(1) { float: left; background: url("images/5.jpg") no-repeat; }
.sb2 > div:nth-of-type(2) { float: left; background: url("images/6.jpg") no-repeat; }
.sb2 > div:nth-of-type(3) { float: left; background: url("images/7.jpg") no-repeat; }
.sb2 > div:nth-of-type(4) { float: left; background: url("images/8.jpg") no-repeat; }
</style>
</head>
<body>
<div id="bg">
<section class="sblock sb1">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="sblock sb2">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</body>
</html>
总结总结
weixin_38532849
- 粉丝: 7
- 资源: 952
最新资源
- 基于java+mysql的毕业设计6套.zip
- windows部署腾讯tmagic-editor03-DSL 解析渲染
- 基于yolov5、dlib和opencv的疲劳驾驶检测系统
- 基于YOLOv5的毒蘑菇检测项目，部署在云服务器上，运行在Android设备上
- 基于爬虫+neo4j+D3实现的苏州旅游知识图谱源码+数据.zip
- Oracle PLSQL 安装json库发送http请求服务
- VC++6.0 ListViewReport报表使用例子
- （python源码）基于图注意力模型（GAT）的交通网络流量预测算法实现
- 登记管理系统安装程序 纯java实现界面交互 v1版本
- 数据库配置面板（WPF）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0