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. QT_string转char*

    char* convertQString2char(const QString &str) { QByteArray ba = str.toUtf8(); char * pathChar = ...

  2. PHP队列类

    /** * Created by PhpStorm. * User: LAMP-Q哥 * Date: 2017/8/3 * Time: 12:58 */ class Queue { private $ ...

  3. 实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)

    做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js / ...

  4. java jsp j2ee

    1. JavaScript用于编写嵌入在网页文档中的程序,它由浏览器负责解释和执行,可以在网页上产生动态的显示效果和实现与用户交互的功能,譬如,让一串文字跟着鼠标移动,让一个图标在网页漂浮移动,验证用 ...

  5. oracle-Oradim

    输入以下命令之一: 通过指定以下选项创建实例: -NEW -SID sid | -SRVC srvc | -ASMSID sid | -ASMSRVC srvc [-SYSPWD pass] [-ST ...

  6. Hello World 之Spring Boot 调用图数据库Neo4j

    明日歌 [清]钱鹤滩 明日复明日,明日何其多! 我生待明日,万事成蹉跎 1. 图数据库Neo4j之爱的初体验 ----与君初相识,犹似故人归 在如今大数据(big data)横行的时代,传统的关系型数 ...

  7. Directx11教程(13) D3D11管线(1)

    原文:Directx11教程(13) D3D11管线(1)       从本篇教程开始,我们暂停代码的学习,先来了解一下D3D11的管线,这些管线不涉及具体的硬件,而是着重于理解能够支持D3D11的管 ...

  8. codevs1506 传话

    题目描述 Description 一个朋友网络,如果a认识b,那么如果a第一次收到某个消息,那么会把这个消息传给b,以及所有a认识的人. 如果a认识b,b不一定认识a. 所有人从1到n编号,给出所有“ ...

  9. bzoj1231 混乱的奶牛

    Description 混乱的奶牛 [Don Piele, 2007] Farmer John的N(4 <= N <= 16)头奶牛中的每一头都有一个唯一的编号S_i (1 <= S ...

  10. js获取url制定的某个参数

    <script>function getURLParam(strParamName, url) {    var strReturn = "";    var strH ...