纯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”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...
随机推荐
- Python3基础 大于一个数的同时小于一个数
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- Win7 winsock 注册表文件
http://files.cnblogs.com/xsmhero/Winsock_Win7x64.rar
- FZU 2151 OOXX Game
OOXX Game Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit St ...
- JAVA查找--[二分查找]
package com.array; public class BinaryFind { /* * 项目名称:二分查找 ; * 项目要求:用JAVA对数组进行查找,并运用快速查找算法; * 作者:Se ...
- C# WPF – 利用“Attached Property” 把 RoutedEvent 接上 ICommand
本文说明怎样把 DoubleClick 连接至 ICommand.方法很多.推荐使用 Attach Property 方式,因为它能把任何 RoutedEvent 接上任何 ICommand. 之前写 ...
- XML详解：第三部分 XML解析
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [SAP ABAP开发技术总结]数据引用（data references）、对象引用（object references）
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Nemerle Quick Guide
This is a quick guide covering nearly all of Nemerle's features. It should be especially useful to a ...
- iOS - Swift NSData 数据
前言 public class NSData : NSObject, NSCopying, NSMutableCopying, NSSecureCoding public class NSMutabl ...
- SQL.变量、运算符、if、while
变量: SQL语言也跟其他编程语言一样,拥有变量.分支.循环等控制语句. 在SQL语言里面把变量分为局部变量和全局变量,全局变量又称系统变量. 局部变量: 使用declare关键字给变量声明,语法非常 ...