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 > div { width: 200px; height: 250px; margin: 0 auto; float: left; transition:all 0.5s; }

        .sb1 { padding-top: 170px; }

        .sb2 { padding-top: 30px; }

        .sblock div:hover { transform: translateY(-10px); }

        .sb1 > div:nth-of-type(1) { background: url("images/1.jpg") no-repeat; }

        .sb1 > div:nth-of-type(2) { background: url("images/2.jpg") no-repeat; }

        .sb1 > div:nth-of-type(3) { background: url("images/3.jpg") no-repeat; }

        .sb1 > div:nth-of-type(4) { background: url("images/4.jpg") no-repeat; }

        .sb2 > div:nth-of-type(1) { background: url("images/5.jpg") no-repeat; }

        .sb2 > div:nth-of-type(2) { background: url("images/6.jpg") no-repeat; }

        .sb2 > div:nth-of-type(3) { background: url("images/7.jpg") no-repeat; }

        .sb2 > div:nth-of-type(4) { 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】分类豆腐块菜单浮动效果的更多相关文章

  1. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  2. CSS3实现翻转菜单效果

    演示地址 点击打开链接 注意:菜单翻转效果在搜狗浏览器上看不出来.推荐用FireFox <!DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1 ...

  3. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  4. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  7. Codrops 教程：基于 CSS3 的精美模态窗口效果

    Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

  8. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  9. Jquery广告浮动效果小案例

    导入<script src="<%=path%>/html5/js/jquery.js"></script>文件 <SCRIPT type ...

随机推荐

  1. Leetcode15.3Sum三数之和

    给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以包含重复的三元组. ...

  2. 手机号测吉凶python代码

    根据数理数来测电话后四位吉凶: 数理数 解释批注 0点特殊.......大吉 1大展鸿图．可获成功吉 2一盛一衰．劳而无功凶 3蒸蒸日上．百事顺遂吉 4坎坷前途．苦难折磨凶 5生意欣荣．名利双收吉 6 ...

  3. curl应用大法

    curl -s -S -k --max-redirs 5 -m 60 --connect-timeout 60 -w  "\n\n%{time_namelookup}|%{time_conn ...

  4. QT_获取运行进程所在目录路径_2

    QString getProcessFullPath(const quint64 &processId) { #ifdef Q_OS_WIN // access process path WC ...

  5. 转:Android新特性介绍，ConstraintLayout完全解析

    转:http://blog.csdn.net/guolin_blog/article/details/53122387 本篇文章的主题是ConstraintLayout.其实ConstraintLay ...

  6. 【水滴石穿】douban-movies-react-native

    这个项目的话,倒是可以做一个支架页面,就是你需要什么东西,你就可以在里面加,不过也是比较难的地方 就是数据流,数据处理的部分.react可以处理数据的方式很多,没有见过类似于古老的vue时候可以使用的 ...

  7. objectarx之判断三点是否在一条直线上

    bool CCommonFuntion::IsOnLine(AcGePoint2d& pt1, AcGePoint2d& pt2, AcGePoint2d& pt3){ AcG ...

  8. Auto reloading enabled

    在eclipse中集成tomcat来开发时, 如果使用run as模式启动项目的话,tomcat配置Auto reloading enabled,我们修改java文件,项目会重新加载,修改的内容会生效 ...

  9. Linux使用注意事项

    1.Linux严格区分大小写 2.Linux中所有内容以文件形式保存,包括硬件 3.修改任何设置,若想永久生效,都需要修改配置文件(除非某些发现版已经默认设置为同时修改内存和硬盘数据). 4.Linu ...

  10. AGC029 E: Wandering TKHS

     E: Wandering TKHS - AtCoder Grand Contest 029 | AtCoder 分类讨论好题(也不太算分类讨论) 方法:感受过程手玩,考虑能不能提前预算一些东西,或者 ...