纯CSS3全屏单页4格网格布局

这是一款非常实用的纯CSS3全屏单页4格网格布局。该布局将整个屏幕平分为4个网格，每个网格是一个项目内容。当点击了相应的网格后，该网格的图片会全屏放大，并显示出该项目的说明文字。

制作方法

HTML结构

该CSS3网格布局的HTML结构中，每一个网格由3个部分组成：一个<input>元素，一个<label>元素和一个用于放置文字内容的<div>元素。

<input id="left-top" type="checkbox" name="left-top"/>
<label for="left-top" class="trigger left top"></label>
<div class="block left top">
  <h1>Left top block heading</h1>
  <div class="content"> 
    <h2>Title</h2>
    <p>...</p> 
    <p>...</p>
  </div> 
</div> 
              

CSS样式

在CSS样式中，每一个网格的宽度和高度都设置为50%，并分别进行定位。

.absPos, .blocks .trigger, .blocks .block {
  position: absolute;
  width: 50%;
  height: 50%;
}
.absPos.top, .blocks .top.trigger, .blocks .top.block {
  top: 0;
}
.absPos.right, .blocks .right.trigger, .blocks .right.block {
  left: 50%;
}
.absPos.bot, .blocks .bot.trigger, .blocks .bot.block {
  top: 50%;
}
.absPos.left, .blocks .left.trigger, .blocks .left.block {
  left: 0;
}              
              

各个网格的点击事件采用checkBox hack来完成，同时为每个网格的切换设置了animation animation动画效果。

.labelClose, .blocks #left-top:checked ~ .trigger.left.top, 
.blocks #right-top:checked ~ .trigger.right.top, 
.blocks #left-bot:checked ~ .trigger.left.bot, 
.blocks #right-bot:checked ~ .trigger.right.bot {
  left: auto;
  bottom: auto;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  z-index: 101;
  -webkit-animation: hideAndShow 1s;
          animation: hideAndShow 1s;
}
@keyframes hideAndShow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  90% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}            
              

CSS代码不是十分复杂，具体请查看下载文件。