CSS3 分类菜单效果


Posted in HTML / CSS onMay 27, 2019

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>

总结

以上所述是小编给大家介绍的CSS3 分类菜单效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
css3实现六边形边框的实例代码
May 24 #HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 #HTML / CSS
css3实现可拖动的魔方3d效果
May 07 #HTML / CSS
CSS3 实现童年的纸飞机
May 05 #HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 #HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 #HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 #HTML / CSS
You might like
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
显示、隐藏密码
2006/07/01 Javascript
jquery text()要注意啦
2009/10/30 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
汽车服务工程专业自荐信
2014/09/02 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年工程工作总结
2014/11/25 职场文书
出纳试用期自我评价
2015/03/10 职场文书
消防验收申请报告
2015/05/15 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
Python图像处理之图像拼接
2021/04/28 Python
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python