用css3实现九宫格分页显示

在完全不用js的前提下怎样实现九宫格分页显示呢??其实只有简单的两行主要代码!
直接上代码:

<style>  
      *{        
              margin:0;        
              padding:0; 
              list-style: none; 
       }   
       .ulone{
              width:330px;
              margin:100px auto; 
       }
      .ulone li{
              width:98px;
              height:100px;
              margin:0 10px 10px 0;
              background: #f00; 
              float: left; 
              border:1px solid #ffffff;
      }  
      //这里就是重点了;
     .ulone li:hover{                    //伪类,当鼠标移入时;
              transform:scale(2,2);  //使li沿着分别x轴和y轴变为原来的两倍大小!
              transition:transform 2s; //在两秒的时间内完成!
      }
</style>

下面是一个简单的html布局

<ul class="ulone">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li> 
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,292评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,510评论 25 709
  • 01 “我叫钱立柱。” 这是我屡进拘留所的第一句要说的话,尽管审讯我的警员是我的小学同学,我们熟悉的程度可以达到,...
    笔尖儿爱写作阅读 333评论 0 4
  • 居易,自乐天,生于中唐动荡时期,书中对他生平事迹的叙述只让人觉苦,觉痛。 “居易不易”是你初到长安拜见顾况之时,顾...
    镜子姑娘阅读 278评论 0 0
  • 冬天的树是孤独的。树在春天有小鸟陪伴,夏天有蝉陪伴,秋天有松鼠陪伴,冬天只有树孤独的站在泥土上。小鸟已经飞...
    作文大神阅读 1,570评论 0 2