纯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”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...
随机推荐
- php获取汉字的拼音 拼音首字母
/***获取汉字的拼音*/function pinyin($s, $isfirst = false) { static $pinyins; $s = trim($s); $len = strlen($ ...
- java课堂动手动脑博客
随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 要求将设计思路.程序流程图.源程序代码.结果截图.编程总结等发表到博客园. (截止时间2015 ...
- Path文件操作实例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddProduct.asp ...
- Cheatsheet: 2014 10.01 ~ 10.30
.NET ASP.NET Web Api: Unwrapping HTTP Error Results and Model State Dictionaries Client-Side HTTP 20 ...
- Cheatsheet: 2013 08.14 ~ 08.19
.NET Lucene.Net ultra fast search for MVC or WebForms site => made easy! C# State Machines HttpCl ...
- 面向对象--类库、委托、is和as运算符、泛型集合
类库: 其实就是一堆类文件,只是看不到这些类的源代码,保密性好. 优点:保密性好 缺点:如果这个方法不好用,使用者无法自己去更改它. 给的大多是dll文件.使用方法:引用右键,添加引用,浏览,选择到相 ...
- wince下的CPU和内存占用率计算
#include <Windows.h> DWORD Caculation_CPU(LPVOID lpVoid) { MEMORYSTATUS MemoryInfo; DWORD Perc ...
- 1.mybatis简介
mybatis简介 MyBatis 是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为My ...
- C# 线程（四）：生产者和消费者
From : http://kb.cnblogs.com/page/42530/ 前面说过,每个线程都有自己的资源,但是代码区是共享的,即每个线程都可以执行相同的函数.这可能带来的问题就是几个线程同时 ...
- SQL collate
摘自:http://www.cnblogs.com/window5549-accp/archive/2009/10/03/1577682.html 我们在create table时经常会碰到这样的语句 ...