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. Lua 调用C模块DLL失败

    Lua中使用 local a = require "xxx" 的方式加载自己用C实现的DLL,DLL中有导出函数 luaopen_xxx . 调试过程中发现,luaopen_xxx ...

  2. OpenLayers图层

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  3. 多线程 多进程 协程 Queue(爬虫代码)

    快速理解多进程与多线程以及协程的使用场合和特点 首先我们来了解下python中的进程,线程以及协程! 从计算机硬件角度: 计算机的核心是CPU,承担了所有的计算任务.一个CPU,在一个时间切片里只能运 ...

  4. Linux下安装配置git

    参考博客: https://www.cnblogs.com/luhouxiang/p/5801853.html但执行git --version命令会出现 git version 1.8.3.1 不是最 ...

  5. Mybatis - plus 配置与运用

    Mybatis - plus mybatis-plus 官方文档  1.配置 引入对应的文件包,spring boot + mybatis 需添加依赖文件如下: <dependencies> ...

  6. day39-Spring 17-Spring的JDBC模板：完成增删改的操作

    JdbcTemplate根DBUtils非常类似,你要是有非常多的Dao,你每一个Dao都需要写它 /*在Dao层注入JDBC模板*/ private JdbcTemplate jdbcTemplat ...

  7. oracle如何穿过防火墙连接数据库

    这个问题只会在WIN平台出现,UNIX平台会自动解决. 解决方法: 在服务器端的SQLNET.ORA应类似 SQLNET.AUTHENTICATION_SERVICES= (NTS) NAMES.DI ...

  8. Person Re-identification 系列论文笔记（七）：PCB+RPP

    Beyond Part Models: Person Retrieval with Refined Part Pooling Sun Y, Zheng L, Yang Y, et al. Beyond ...

  9. @codeforces - 1276F@ Asterisk Substrings

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个包含 n 个小写字母的字符串 s,用 s 生成 n 个串 ...

  10. DFS-生日蛋糕

    生日蛋糕 一道深搜题,看了这两个博客才懂的. http://blog.csdn.net/blesslzh0108/article/details/53486168 http://blog.csdn.n ...