纯css3代码写九宫格效果
主要用到css3中的transition和布局知识。代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="">
<title>标题</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: url(images/bg.jpg);}
#demo{
width: 906px;
height: 486px;
background: rgba(0,0,0,0.4);
margin: 80px auto;
border:5px solid #fff;
}
ul,li{list-style: none;}
#demo ul li{
float: left;
width: 300px;
height: 160px;
background: #00cc00;
border:1px solid #fff;
position: relative;
}
#demo ul li img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition:all 2s linear;
-moz-transition:all 2s linear;
-ms-transition:all 2s linear;
-o-transition:all 2s linear;
transition:all 2s linear;
}
#demo ul li img.default{opacity: 1;}
#demo ul li a{
position: absolute;
top:0;
left: 0;
background: rgba(0,0,0,0.5);
text-align: center;
width: 100%;
line-height: 160px;
font-size: 22px;
color: #fff;
text-decoration: none;
opacity: 0.5;
}
#demo ul li:hover a{opacity: 1;}
#demo ul li:hover .toBottom{top:162px;opacity: 1;z-index: 999;}
#demo ul li:hover .toLeft{left:-302px;opacity: 1;z-index: 999;}
#demo ul li:hover .toTop{top:-162px;opacity: 1;z-index: 999;}
#demo ul li:hover .toRight{left:302px;opacity: 1;z-index: 999;}
</style>
<body>
<div id="demo">
<ul>
<li>
<img src="data:images/img1.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/seob.jpg" class="toBottom">
<img src="data:images/seor.jpg" class="toRight">
</li>
<li>
<img src="data:images/img2.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/taob.jpg" class="toBottom">
<img src="data:images/taor.jpg" class="toRight">
<img src="data:images/taol.jpg" class="toLeft">
</li>
<li>
<img src="data:images/img3.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/syb.jpg" class="toBottom">
<img src="data:images/syl.jpg" class="toLeft">
</li>
<li>
<img src="data:images/img4.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/jb.jpg" class="toBottom">
<img src="data:images/jr.jpg" class="toRight">
<img src="data:images/jt.jpg" class="toTop">
</li>
<li>
<img src="data:images/img5.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/wr.jpg" class="toRight">
<img src="data:images/wt.jpg" class="toTop">
<img src="data:images/wl.jpg" class="toLeft">
<img src="data:images/wb.jpg" class="toBottom">
</li>
<li>
<img src="data:images/img6.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/pb.jpg" class="toBottom">
<img src="data:images/pl.jpg" class="toLeft">
<img src="data:images/pt.jpg" class="toTop">
</li>
<li>
<img src="data:images/img7.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/ynr.jpg" class="toRight">
<img src="data:images/ynt.jpg" class="toTop">
</li>
<li>
<img src="data:images/img8.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/snr.jpg" class="toRight">
<img src="data:images/snt.jpg" class="toTop">
<img src="data:images/snl.jpg" class="toLeft">
</li>
<li>
<img src="data:images/img9.png" class="default" />
<a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
<img src="data:images/wll.jpg" class="toLeft">
<img src="data:images/wlt.jpg" class="toTop">
</li>
</ul>
</div>
</body>
</html>
纯css3代码写九宫格效果的更多相关文章
- 纯css3代码写无缝滚动效果
主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...
- 纯css3代码写下拉菜单效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动
今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...
- 一款简洁的纯css3代码实现的动画导航
之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- 纯CSS3代码实现简单的图片轮播
以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显 ...
- 纯CSS3代码实现表格奇偶行异色，鼠标悬浮变色
1.首先会用到<tr></tr>元素两个伪类,nth-child()和hover. 然后需要注意的是伪类都是通过冒号引用的,不是点号,即tr:hover{} 其次,CSS代码中 ...
- 纯CSS3制作的“Ribbons”效果
在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...
随机推荐
- Session对象实例
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- HTTP传送协议
HTTP传送协议--学习笔记 HTTP数据传输格式 基本格式为: 请求或应答行 请求或应答头部 空行 数据 POST传送格式 底层数据通信: 客户端请求: POST /response.php HTT ...
- CCNA training notes
5/29: vlan:virtual lan, 通过PVID来将物理上连通的host/PC划分到不同的局域网. switch的每个port有access与trunk两种mode,trunk模式的por ...
- Using Post_Query Trigger in Oracle Forms
When a query is open in the block, the Post-Query trigger fires each time Form Builder fetches a rec ...
- Hibernate 配置
package com.shuyinghengxie.doudou; import static org.junit.Assert.*; import org.hibernate.SessionFac ...
- zoj 1010 （线段相交判断+多边形求面积）
链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=10 Area Time Limit: 2 Seconds Mem ...
- FJNU 1152 Fat Brother And Integer（胖哥与整数）
FJNU 1152 Fat Brother And Integer(胖哥与整数) Time Limit: 1000MS Memory Limit: 257792K [Description] [题 ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- phpcms 在后台增加了一个模型的话，在数据库中就会相应的增加数据库表
在phpcms后台管理系统中,我们如果增加一个新的模型的话,例如名为:测试模型,英文名:test 在添加完成后,我们在数据库中发现增加了两个数据表:v9_test,v9_test_data;
- DB层面上的设计 分库分表 读写分离 集群化 负载均衡
第1章 引言 随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的 互联网应用,每天几十亿的PV无疑对数据库造成了相当高的负载.对于系统的稳定性和扩展性造成了极大的 ...