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 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
php获取根域名方法汇总
2014/10/28 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python删除列表内容
2015/08/04 Python
django做form表单的数据验证过程详解
2019/07/26 Python
学习Django知识点分享
2019/09/11 Python
python的Jenkins接口调用方式
2020/05/12 Python
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
Java程序员综合测试题
2014/04/25 面试题
中文系学生自荐信范文
2013/11/13 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
导游词之日月潭
2019/11/05 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript