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. [翻译] MaxMind DB 文件格式规范

    MaxMind DB 文件格式规范来源:http://maxmind.github.io/MaxMind-DB/翻译:御风(TX:965551582)2017-03-23 -------------- ...

  2. Uva116 Unidirectional TSP

    https://odzkskevi.qnssl.com/292ca2c84ab5bd27a2a91d66827dd320?v=1508162936 https://vjudge.net/problem ...

  3. PHP 学习1.3

    1.展示类的继承和静态的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. java如何访问memcache

    1       Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的 ...

  5. nested exception is org.hibernate.MappingException解决方案

    1.可能是因为映射文件( Order.hbm.xm)配置的class路径出错 <hibernate-mapping> <class name="com.web.bean.O ...

  6. Android——app基础

    Android Application基础 系统启动过程 APK文件介绍 APK是Android Package的缩写,即android安装包.APK 文件其实是zip 格式,但后缀名被修改为apk  ...

  7. from和modelform的用法和介绍

    from和modelform的用法和介绍   一 form 1. form的作用 1. 生成HTML代码 2. 帮我们做数据有效性的校验 3. 保留上次输入内容,显示错误提示 2. form组件校验数 ...

  8. 在一个已经使用mybatis的项目里引入mybatis-plus，结果不能共存

    mybatis-plus版本号:3.0.6 问题产生原因: 原有的项目使用的是springboot+mybatis的框架,一切接口服务均没有问题.由于新的需求增加shiro权限认证,然后也在考虑用my ...

  9. IOS开发基础篇--CAShapeLayer的strokeStart和strokeEnd属性

    http://blog.csdn.net/yixiangboy/article/details/50662704 一.案例演示 最近有一个小需求,就是要做一个圆形进度条,大概样子如下: . 在不知道有 ...

  10. VisualVM介绍使用

    1    打开VisualVM(这个工具放在JDK安装目录的bin目录下,双击jvisualvm.exe即可打开),如下图所示 以VisualVM自身为例,VisualVM本身也是一个java程序,当 ...