纯css3代码写九宫格效果

主要用到css3中的transition和布局知识。代码如下

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <meta name="">
  6   <title>标题</title>
  7 </head>
  8 <style type="text/css">
  9   *{margin: 0;padding: 0;}
 10   body{background: url(images/bg.jpg);}
 11   #demo{
 12     width: 906px;
 13     height: 486px;
 14     background: rgba(0,0,0,0.4);
 15     margin: 80px auto;
 16     border:5px solid #fff;
 17   }
 18   ul,li{list-style: none;}
 19   #demo ul li{
 20     float: left;
 21     width: 300px;
 22     height: 160px;
 23     background: #00cc00;
 24     border:1px solid #fff;
 25     position: relative;
 26   }
 27   #demo ul li img{
 28     position: absolute;
 29     top: 0;
 30     left: 0;
 31     width: 100%;
 32     height: 100%;
 33     opacity: 0;
 34     -webkit-transition:all 2s linear;
 35     -moz-transition:all 2s linear;
 36     -ms-transition:all 2s linear;
 37     -o-transition:all 2s linear;
 38     transition:all 2s linear;
 39   }
 40   #demo ul li img.default{opacity: 1;}
 41   #demo ul li a{
 42     position: absolute;
 43     top:0;
 44     left: 0;
 45     background: rgba(0,0,0,0.5);
 46     text-align: center;
 47     width: 100%;
 48     line-height: 160px;
 49     font-size: 22px;
 50     color: #fff;
 51     text-decoration: none;
 52     opacity: 0.5;
 53   }
 54   #demo ul li:hover a{opacity: 1;}
 55   #demo ul li:hover .toBottom{top:162px;opacity: 1;z-index: 999;}
 56   #demo ul li:hover .toLeft{left:-302px;opacity: 1;z-index: 999;}
 57   #demo ul li:hover .toTop{top:-162px;opacity: 1;z-index: 999;}
 58   #demo ul li:hover .toRight{left:302px;opacity: 1;z-index: 999;}
 59 </style>
 60 <body>
 61   <div id="demo">
 62     <ul>
 63       <li>
 64         <img src="images/img1.png" class="default" />
 65         <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
 66         <img src="images/seob.jpg" class="toBottom">
 67         <img src="images/seor.jpg" class="toRight">
 68       </li>
 69       <li>
 70         <img src="images/img2.png" class="default" />
 71         <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
 72         <img src="images/taob.jpg" class="toBottom">
 73         <img src="images/taor.jpg" class="toRight">
 74         <img src="images/taol.jpg" class="toLeft">
 75       </li>
 76       <li>
 77         <img src="images/img3.png" class="default" />
 78         <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
 79         <img src="images/syb.jpg" class="toBottom">
 80         <img src="images/syl.jpg" class="toLeft">
 81       </li>
 82       <li>
 83         <img src="images/img4.png" class="default" />
 84         <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
 85         <img src="images/jb.jpg" class="toBottom">
 86         <img src="images/jr.jpg" class="toRight">
 87         <img src="images/jt.jpg" class="toTop">
 88       </li>
 89       <li>
 90         <img src="images/img5.png" class="default" />
 91         <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
 92         <img src="images/wr.jpg" class="toRight">
 93         <img src="images/wt.jpg" class="toTop">
 94         <img src="images/wl.jpg" class="toLeft">
 95         <img src="images/wb.jpg" class="toBottom">
 96       </li>
 97       <li>
 98         <img src="images/img6.png" class="default" />
 99         <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
100         <img src="images/pb.jpg" class="toBottom">
101         <img src="images/pl.jpg" class="toLeft">
102         <img src="images/pt.jpg" class="toTop">
103       </li>
104       <li>
105         <img src="images/img7.png" class="default" />
106         <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
107         <img src="images/ynr.jpg" class="toRight">
108         <img src="images/ynt.jpg" class="toTop">
109       </li>
110       <li>
111         <img src="images/img8.png" class="default" />
112         <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
113         <img src="images/snr.jpg" class="toRight">
114         <img src="images/snt.jpg" class="toTop">
115         <img src="images/snl.jpg" class="toLeft">
116       </li>
117       <li>
118         <img src="images/img9.png" class="default" />
119         <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a>
120         <img src="images/wll.jpg" class="toLeft">
121         <img src="images/wlt.jpg" class="toTop">
122       </li>
123     </ul>
124   </div>
125 </body>
126 </html>

时间: 2024-10-09 05:40:51

纯css3代码写九宫格效果的相关文章

纯css3代码写无缝滚动效果

主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具体代码如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title&

纯css3代码写下拉菜单效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no"> 6 <title>CSS3树形菜单</ti

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

今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. .toggle input:checked + .ss div { transform: translate3d(60px, 0, 0); background-color: #fff;}

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

之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div align="center" style="background-color: #ee1d27; padding: 20px;"> <div class="contener_link"> <div class=&qu

纯CSS3制作的圆角效果按钮菜单

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS3制作的圆角效果按钮菜单丨曲阳雕塑</title> <style type="text/css"> nav{display: block; width: 100%; ov

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

效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text_effect.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>

纯CSS3实现彩色缎带效果

<!DOCTYPE HTML> <html> <head> <title>纯CSS3缎带效果</title> <style type="text/css"> .ribbon-content{border: 1px solid #DDD;font-weight: bold;margin: 0 -10px;min-height: 30px;padding: 7px 31px;text-align: center;lin

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

1.首先会用到<tr></tr>元素两个伪类,nth-child()和hover. 然后需要注意的是伪类都是通过冒号引用的,不是点号,即tr:hover{} 其次,CSS代码中要注意顺序. tr:nth-child(odd){ background-color:#CFF;} tr:nth-child(even){ background-color:#699;} tr:hover{ background-color:#F0C;} 写成这样是可以正常完成所需要的功能的,但是 如果你写成

纯CSS3制作的“Ribbons”效果

在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看 到或者说感受到.别的我就不多说了,我想上图能示意出“Ribbons”各个部位.那么每个部位我们可以使用一个“html”标签,当然有了CSS3的伪 元素“::before”和“::after”后,我们可以省去一些标签. 效果一: HTML Markup <div class="ribbons"