纯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”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...
随机推荐
- V-rep学习笔记：机器人逆运动学数值解法（Cyclic Coordinate Descent Method）
When performing inverse kinematics (IK) on a complicated bone chain, it can become too complex for a ...
- D django 用户认证系统
django认证系统包含三个部分:用户.权限和分组 安装 django项目默认启用了认证系统,如果不是使用django-admin.py创建项目的可以通过在settings配置文件里面的INSTALL ...
- 用t4模板和head.js进行css和js的版本控制
head.js 介绍 http://headjs.com/site/api/v1.00.html#load 原文http://www.cnblogs.com/wang2650/p/5102690.h ...
- 让css初学者抓狂的属性float
挣扎了好久,始终没有决定要不要写博客,心里有几个顾虑一是我是小白,我写的文章有没有人看?二是我是小白,我写的文章假如存在诸多错误,理解的不对发表上去再去误导别人.三是写一篇文章费时费力.但是我现在想明 ...
- 工具配置（eclipse/plsql）
PLSQL 附常用配置: PrefAutomaticStatistics=True SelectedStatNames= AutoSelectSQL=True ShowSQLWindowGutte ...
- javascript练习----复选框全选，全不选，反选
第一种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- iOS - KVC 键值编码
1.KVC KVC 是 Key-Value Coding 的简写,是键值编码的意思,属于 runtime 方法.Key Value Coding 是 cocoa 的一个标准组成部分,是间接给对象属性设 ...
- Redis基础知识之—— 缓存应用场景
转载原文:http://www.cnblogs.com/jinshengzhi/articles/5225718.html 一.MySql+Memcached架构的问题 Memcached采用客户端- ...
- SAP MM Consignment 寄售库存
转自:http://blog.csdn.net/futurewind/article/details/3985200 寄售,定义就是供应商的货物放在自己的库存中,使用的时候可以转到自己的库存,不用了就 ...
- js之oop <一> 创建对象，构造器(class)
js中除了基本类型,就是对象.可以说在js中处处皆对象. 由于js是弱语言,在编写的过程中很容易混淆 object 和 class 也就是对象和构造器. object(对象):一般对象都由var关键字 ...