主要用到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代码写九宫格效果的更多相关文章

  1. 纯css3代码写无缝滚动效果

    主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...

  2. 纯css3代码写下拉菜单效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动

    今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...

  4. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  5. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  6. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  7. 纯CSS3代码实现简单的图片轮播

    以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显 ...

  8. 纯CSS3代码实现表格奇偶行异色，鼠标悬浮变色

    1.首先会用到<tr></tr>元素两个伪类,nth-child()和hover. 然后需要注意的是伪类都是通过冒号引用的,不是点号,即tr:hover{} 其次,CSS代码中 ...

  9. 纯CSS3制作的“Ribbons”效果

    在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者 ...

随机推荐

  1. VirtualBox下Ubuntu利用桥接方式上网

    1.打开virtualbox,选择[设置]-[网络]将连接方式改为[Bridged Adapter] 2.在Ubuntu中, 运行sudo gedit /etc/network/interfaces ...

  2. linux下查看分区信息和剩余空间大小

    1. 查看Linux系统分区信息,使用命令“fdisk -l” 2.使用命令”df -l和df -h“具体查看分区使用状况.实际这两个命令具有一样的作用区别是显示的容量单位不一样,当然也可以直接使用明 ...

  3. 【leetcode❤python】118. Pascal's Triangle

    #-*- coding: UTF-8 -*-#杨辉三角class Solution(object):    def generate(self, numRows):        "&quo ...

  4. BZOJ 3534 重建

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3534 题意:给定一个无向图,每条边有选择概率P:求选出的边恰是一棵生成树的概率. 思路: ...

  5. BZOJ 3551 Peaks加强版

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3551 题意:给出一个图,n个点,m条边.边有权值点也有权值.若干询问,(v,x,k),问从 ...

  6. 拖拽碰撞效果，高级浏览器下全部搞定（ie6-8还没有搞定）

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  7. javascript encodeURI和encodeURIComponent的比较

    总结:encodeURI对除三种字符()之外的字符进行编码 encodeURIComponent对除两种字符之外的字符进行编码,保留字符会被转义 在进行SaaS前端开发的时候,大家经常会用到两个Jav ...

  8. jquery之 animate()方法详解

    jQuery.animate() 函数详解 animate()函数用于执行一个基于css属性的自定义动画. 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css ...

  9. Create Stacked Canvas to Scroll Horizontal Tabular Data Blocks In Oracle Forms

    In this tutorial you will learn to create horizontal scrollable tabular or detail data block by usin ...

  10. 通过数据库和EasyUI的combobox级联实现省市区三级联动

    1.新建一个web项目 2.因为这里用到了数据库所以我们在lib目录导入Hibernate的jar包.fastjson.jar包及数据库jar包 3.同样导入EasyUI的组件配置,并在新建的html ...