【CSS3】分类豆腐块菜单浮动效果
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】分类豆腐块菜单浮动效果的更多相关文章
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- CSS3实现翻转菜单效果
演示地址 点击打开链接 注意:菜单翻转效果在搜狗浏览器上看不出来.推荐用FireFox <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- CSS3实现3d菜单翻转
transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- jq菜单折叠效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- Jquery广告浮动效果小案例
导入<script src="<%=path%>/html5/js/jquery.js"></script>文件 <SCRIPT type ...
随机推荐
- 洛谷P2381 圆圆舞蹈
P2381 圆圆舞蹈 题目描述 熊大妈的乃修在时针的带领下,围成了一个圆圈舞蹈,由于没有严格的教育,奶牛们之间的间隔不一致. 奶牛想知道两只最远的奶牛到底隔了多远.奶牛A到B的距离为A顺时针走和逆时针 ...
- 响应式布局及bootstrap(实例)
说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...
- IDEA(JAVA)使用json
首先介绍一下json SON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度. JSON就是一串字符串 只不过元素会使用特定的 ...
- cocos2dx3.0项目创建流程
cocos2dx3.0不是beta,新增了wp项目创建的支持 但不知道为啥非beta版本号的tools文件夹中取消了project-creator,可能有更改吧 没有这个工具还挺麻烦.就自己手动创建c ...
- Directx11教程(9) 增加一个TimerClass类
原文:Directx11教程(9) 增加一个TimerClass类 在上篇教程代码的基础上,我们增加一个TimerClass类,这个类的功能很简单,就是可以计算相邻2帧的时间差.利用这个时间 ...
- 微服务开源生态报告 No.5
「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源项目的最新进展. 社区动态包括,但不限于:版本发布.人员动态.项目动态和规划.培训和活动. 非常欢迎国内其他微服 ...
- 2017 校赛 问题 E: 神奇的序列
题目描述 Aurora在南宁发现了一个神奇的序列,即对于该序列的任意相邻两数之和都不是三的倍数.现在给你一个长度为n的整数序列,让你判断是否能够通过重新排列序列里的数字使得该序列变成一个 ...
- dsadsa
1.Swift预览 一般来说,编程语言教程中的第一个程序是在屏幕上打印“Hello, world”.在 Swift 中,可以用一行代码实现: println("Hello, world&qu ...
- hdu2516 博弈
找规律,发现时斐波那契数列:打表上. #include<stdio.h> #include<string.h> #define maxn 2147483647 __int64 ...
- ORA-03113: end-of-file on communication channel 解决方法
今天在测试数据库中对一个表插入了大量的数据, 导致数据库卡死 hang 住, 重启数据库后报错如下: C:\Documents and Settings\davidd>sqlplus " ...