主要用到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. Shell 脚本面试问题大全

    我们为你的面试准备选择了 70 个你可能遇到的 shell 脚本面试问题及解答.了解脚本或至少知道基础知识对系统管理员来说至关重要,它也有助于你在工作环境中自动完成很多任务.在过去的几年里,我们注意到 ...

  2. [翻译]投影变换 Projection Transform (Direct3D 9)

    你可以认为投影变换就是控制摄像机内部的一种方式.他可以类推为为摄像机选择一个漏字板.它是三种变换中最难懂的.本文只讨论以下的一些内容. 典型的投影变换就是缩放和透视投影.投影就变换把视椎转化为一个立方 ...

  3. nohup不输出日志信息的方法，及linux重定向学习

    起因 最近使用nohup创建了一个后台进程,默认日志输出到了nohup.out文件中,程序跑起来也就没再管,过了大约一周,发现硬盘空间不够了,于是查找原因,发现这个nohup.out文件已经到了70G ...

  4. JaveScript变量作用域说明

    JaveScript变量作用域说明     一:将var类型的变量视为变量,不带var类型的变量视为常量(但是注意php的常量不可以重新定义,而javascript中不带var类型的变量可以重新定义) ...

  5. .Net需要掌握的知识

    一.C#开发 1.C#基础 变量定义 如何变量的初始化 变量的作用域 常量 字符串处理 使用正则表达式 什么是CTS类型?数据类型如何分类以及各个数据类型范围 类型的转化分类 显式转换何隐式转化如何区 ...

  6. 哈理工软件学院"兆方美迪"杯第六届程序设计大赛【高年级组】--决赛 题解

    比赛链接:http://acm-software.hrbust.edu.cn/contest.php?cid=1082 A.好SB啊真是,还以为lis-数有多少个数不一样. #include < ...

  7. Timeout expired超时时间已到. 达到了最大池大小 错误及Max Pool Size设置

    此文章非原创,仅为分享.学习!!! 参考数据库链接串: <add key="data" value="server=192.168.1.123; port=3306 ...

  8. 屏幕序列Screen Sequences

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. 虚拟机guest为windows7的环境下安装破解版simplify3d_3.0.2

    情形: 1.主机(host):ubuntu 2.虚拟机里安装的操作系统版本(guest):windows 7专业版 3.simplify3d破解版版本:3.0.2(破解需要的工具均在下文的百度云地址里 ...

  10. IO设计模式：Reactor和Proactor对比

    IO设计模式:Reactor和Proactor对比 平时接触的开源产品如Redis.ACE,事件模型都使用的Reactor模式:而同样做事件处理的Proactor,由于操作系统的原因,相关的开源产品也 ...