【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 ...
随机推荐
- 威胁快报|Nexus Repository Manager 3新漏洞已被用于挖矿木马传播,建议用户尽快修复
背景 近日,阿里云安全监测到watchbog挖矿木马使用新曝光的Nexus Repository Manager 3远程代码执行漏洞(CVE-2019-7238)进行攻击并挖矿的事件. 值得注意的是, ...
- mac 下的 homebrew
如果安装了macport 就不能安装homebrew ,必须先卸载macport $ sudo port -f uninstall installed$ sudo rm -rf \/opt/local ...
- shell 向python传参数,空格引发的问题
昨天用一个shell脚本,调用一个python脚本,并把shell脚本中用 time1=`date "+%Y-%m-%d %H:%M:%S"`生成的时间戳作为参数,传到python ...
- ecshop二次开发之视频上传
1.前台展示效果: 2.后台展示效果: 3.代码实现: 后台实现过程: 1.在languages/zh_cn/admin/goods.PHP中插入 $_LANG['tab_video'] = '视频上 ...
- 50倍时空算力提升,阿里云RDS PostgreSQL GPU版本上线
2019年3月19日,阿里云RDS PostgreSQL数据库GPU规格版本正式上线,开启了RDS异构计算并行加速之路.该版本在RDS(关系型数据库服务)的云基础设施层面首次完成了与阿里云异构计算产品 ...
- 使用split_size优化的ODPS SQL的场景
使用split_size优化的ODPS SQL的场景 首先有两个大背景需要说明如下:说明1:split_size,设定一个map的最大数据输入量,单位M,默认256M.用户可以通过控制这个变量,从而达 ...
- noip考前模板复习
网络流 Dinic(搭配飞行员) //Serene #include<algorithm> #include<iostream> #include<cstring> ...
- 数据挖掘算法R语言实现之决策树
数据挖掘算法R语言实现之决策树 最近,看到很多朋友问我如何用数据挖掘算法R语言实现之决策树,想要了解这方面的内容如下: > library("party")导入数据包 > ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 全书总结 本系列文章中可能有很多翻译有问题或者错误的地方:并且有些章节 ...
- day39-Spring 18-Spring的JDBC模板:查询的操作
package cn.itcast.spring3.demo2; import java.sql.ResultSet; import java.sql.SQLException; import jav ...