图片/图形

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

PetitQPetitQ 图片/图形 2019-1-21 1.56K 0
收藏
阿里云


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

HTML 结构

该 CSS3 网格布局的 HTML 结构中，每一个网格由 3 个部分组成：一个元素，一个

也想出现在这里？联系我们吧
创客主机
元素。

  1. <input id="left-top" type="checkbox" name="left-top"/>
  2. <label for="left-top" class="trigger left top"></label>
  3. <div class="block left top">
  4.   <h1>Left top block heading</h1>
  5.   <div class="content"> 
  6.     <h2>Title</h2>
  7.     <p>...</p> 
  8.     <p>...</p>
  9.   </div> 
  10. </div>

CSS 样式

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

  1. .absPos, .blocks .trigger, .blocks .block {
  2.   position: absolute;
  3.   width: 50%;
  4.   height: 50%;
  5. }
  6. .absPos.top, .blocks .top.trigger, .blocks .top.block {
  7.   top: 0;
  8. }
  9. .absPos.right, .blocks .right.trigger, .blocks .right.block {
  10.   left: 50%;
  11. }
  12. .absPos.bot, .blocks .bot.trigger, .blocks .bot.block {
  13.   top: 50%;
  14. }
  15. .absPos.left, .blocks .left.trigger, .blocks .left.block {
  16.   left: 0;
  17. }

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

  1. .labelClose, .blocks #left-top:checked ~ .trigger.left.top, 
  2. .blocks #right-top:checked ~ .trigger.right.top, 
  3. .blocks #left-bot:checked ~ .trigger.left.bot, 
  4. .blocks #right-bot:checked ~ .trigger.right.bot {
  5.   left: auto;
  6.   bottom: auto;
  7.   right: 0;
  8.   top: 0;
  9.   width: 30px;
  10.   height: 30px;
  11.   z-index: 101;
  12.   -webkit-animation: hideAndShow 1s;
  13.           animation: hideAndShow 1s;
  14. }
  15. @keyframes hideAndShow {
  16.   0% {
  17.     opacity: 0;
  18.   }
  19.   50% {
  20.     opacity: 0;
  21.     -webkit-transform: scale(0.5);
  22.             transform: scale(0.5);
  23.   }
  24.   90% {
  25.     -webkit-transform: scale(1.2);
  26.             transform: scale(1.2);
  27.   }
  28.   100% {
  29.     opacity: 1;
  30.     -webkit-transform: scale(1);
  31.             transform: scale(1);
  32.   }
  33. }

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

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

已有 391 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(0)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录