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. 【洛谷】P1876 开灯

    P1876 开灯 题目背景 该题的题目是不是感到很眼熟呢? 事实上,如果你懂的方法,该题的代码简直不能再短. 但是如果你不懂得呢?那...(自己去想) 题目描述 首先所有的灯都是关的(注意是关!),编 ...

  2. 洛谷P2196 挖地雷 [2017年4月计划 动态规划13]

    P2196 挖地雷 题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之 ...

  3. 七牛云+MPic-图床神器搭建

    1. 注册七牛云 2. 新建存储空间 3. 密钥 4. 记录自己账户四个值: 测试域名:xxxxx.xx.clouddn.com ak:xxxxxxxxxxxxxxxxxxxx sk:xxxxxxxx ...

  4. 关于Ajax提交后无法刷新iframe页面的问题

    原因及解决方法: 要把刷新代码写进ajax的代码块里面,而不是放在后面

  5. python中在计算机视觉中的库及基础用法

    基于python脚本语开发的数字图像处理包有很多,常见的比如PIL.Pillow.opencv.scikit-image等.PIL和pillow只提供了基础的数字图像处理,功能有限:OpenCV实际上 ...

  6. CLTPHP5.0发布

    CLTPHP内容管理系统,包含系统设置,权限管理,模型管理,数据库管理,栏目管理,会员管理,网站功能,模版管理,微信管理等相关模块.   CLTPHP内容管理系统=ThinkPHP5+layuiAdm ...

  7. FPGA按键功能

    1.如何判断按键成功按下? 2.在什么时候采集数据? 按键在按下的过程中会产生大约2ms-3ms抖动,如果此时此刻采集数据来判断按键是不准确的,那么为了采集到准确的数据需要设置一个大约10ms左右的计 ...

  8. 如何合并两个git commit

    把你的修改stage之后运行: git rebase -i HEAD~2 然后把第二行的pick改成squash就ok啦 note: 同理,如果要合并多个commit,把后面的2改成你想要合并的com ...

  9. Sentinel 1.5.0 正式发布，引入 Reactive 支持

    近日,流控降级组件 Sentinel 的又一个里程碑版本 1.5.0 正式发布. 该版本引入 Reactive 的支持,并提供多项新特性与改进.从 1.5.0 版本开始,Sentinel 仅支持 JD ...

  10. iOS 9 新特性之实现 3D Touch

    http://www.cocoachina.com/ios/20151027/13812.html 10月19号,周末,起床去吃早餐,吃完回来顺便去沃尔玛逛逛,把晚上的菜给买了,逛着逛着就来到了卖苹果 ...