以下是 CSS3实现六边形网格布局样式代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3实现六边形网格布局样式代码</title>
<link rel="stylesheet" type="text/css" href="css/hexagons.css">
</head>
<body>
<ul id="hexGrid">
<li class="hex">
<a class="hexIn" href="#">
<img src="img/1.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/2.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/4.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/5.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/6.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/8.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/1.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/2.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/4.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/5.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/6.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/8.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/1.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/2.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/4.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/5.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/6.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/8.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/1.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/2.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/3.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/4.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/5.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/6.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/7.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<img src="img/8.jpg" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a>
</li>
</ul>
</body>
</html>
CSS代码(hexagons.css):
*{margin:0;padding:0;}
body{background:rgb(123,158,158);}
#hexGrid{overflow:hidden;width:90%;margin:0 auto;padding:0.866% 0;font-family:'Raleway',sans-serif;font-size:15px;}
#hexGrid:after{content:"";display:block;clear:both;}
.hex{position:relative;list-style-type:none;float:left;overflow:hidden;visibility:hidden;outline:1px solid transparent;/* fix for jagged edges in FF on hover transition */
-webkit-transform:rotate(-60deg) skewY(30deg) translatez(-1px);-ms-transform:rotate(-60deg) skewY(30deg) translatez(-1px);transform:rotate(-60deg) skewY(30deg) translatez(-1px);}
.hex *{position:absolute;visibility:visible;outline:1px solid transparent;/* fix for jagged edges in FF on hover transition */
}
.hexIn{display:block;width:100%;height:100%;text-align:center;color:#fff;overflow:hidden;-webkit-transform:skewY(-30deg) rotate(60deg);-ms-transform:skewY(-30deg) rotate(60deg);transform:skewY(-30deg) rotate(60deg);}
/*** HEX CONTENT **********************************************************************/
.hex img{left:-100%;right:-100%;width:auto;height:100%;margin:0 auto;}
.hex h1,.hex p{width:102%;left:-1%;/* prevent line on the right where background doesn't cover image */
padding:5%;box-sizing:border-box;background-color:rgba(0,128,128,0.8);font-weight:300;-webkit-transition:-webkit-transform .2s ease-out,opacity .3s ease-out;transition:transform .2s ease-out,opacity .3s ease-out;}
.hex h1{bottom:50%;padding-top:50%;font-size:1.5em;z-index:1;-webkit-transform:translateY(-100%) translatez(-1px);-ms-transform:translateY(-100%) translatez(-1px);transform:translateY(-100%) translatez(-1px);}
.hex h1:after{content:'';position:absolute;bottom:0;left:45%;width:10%;text-align:center;border-bottom:1px solid #fff;}
.hex p{top:50%;padding-bottom:50%;-webkit-transform:translateY(100%) translatez(-1px);-ms-transform:translateY(100%) translatez(-1px);transform:translateY(100%) translatez(-1px);}
/*** HOVER EFFECT **********************************************************************/
.hexIn:hover h1,.hexIn:focus h1,.hexIn:hover p,.hexIn:focus p{-webkit-transform:translateY(0%) translatez(-1px);-ms-transform:translateY(0%) translatez(-1px);transform:translateY(0%) translatez(-1px);}
/*** SPACING AND SIZING *****************************************************************/
@media (min-width:1201px){/* <- 5-4 hexagons per row */
.hex{width:19.2%;/* = (100-4) / 5 */
padding-bottom:22.170%;/* = width / sin(60deg) */
}
.hex:nth-child(9n+6),.hex:nth-child(9n+7),.hex:nth-child(9n+8),.hex:nth-child(9n+9){margin-top:-4.676%;margin-bottom:-4.676%;-webkit-transform:translateX(50%) rotate(-60deg) skewY(30deg);-ms-transform:translateX(50%) rotate(-60deg) skewY(30deg);transform:translateX(50%) rotate(-60deg) skewY(30deg);}
.hex:nth-child(9n+6):last-child,.hex:nth-child(9n+7):last-child,.hex:nth-child(9n+8):last-child,.hex:nth-child(9n+9):last-child{margin-bottom:0;}
.hex:nth-child(9n+6){margin-left:0.5%;clear:left;}
.hex:nth-child(9n+10){clear:left;}
.hex:nth-child(9n+2),.hex:nth-child(9n+ 7){margin-left:1%;margin-right:1%;}
.hex:nth-child(9n+3),.hex:nth-child(9n+4),.hex:nth-child(9n+8){margin-right:1%;}
}
@media (max-width:1200px) and (min-width:901px){/* <- 4-3 hexagons per row */
.hex{width:24.25%;/* = (100-3) / 4 */
padding-bottom:28.001%;/* = width / sin(60deg) */
}
.hex:nth-child(7n+5),.hex:nth-child(7n+6),.hex:nth-child(7n+7){margin-top:-6.134%;margin-bottom:-6.134%;-webkit-transform:translateX(50%) rotate(-60deg) skewY(30deg);-ms-transform:translateX(50%) rotate(-60deg) skewY(30deg);transform:translateX(50%) rotate(-60deg) skewY(30deg);}
.hex:nth-child(7n+5):last-child,.hex:nth-child(7n+6):last-child,.hex:nth-child(7n+7):last-child{margin-bottom:0;}
.hex:nth-child(7n+2),.hex:nth-child(7n+6){margin-left:1%;margin-right:1%;}
.hex:nth-child(7n+3){margin-right:1%;}
.hex:nth-child(7n+8){clear:left;}
.hex:nth-child(7n+5){clear:left;margin-left:0.5%;}
}
@media (max-width:900px) and (min-width:601px){/* <- 3-2 hexagons per row */
.hex{width:32.666%;/* = (100-2) / 3 */
padding-bottom:37.720%;/* = width / sin(60) */
}
.hex:nth-child(5n+4),.hex:nth-child(5n+5){margin-top:-8.564%;margin-bottom:-8.564%;-webkit-transform:translateX(50%) rotate(-60deg) skewY(30deg);-ms-transform:translateX(50%) rotate(-60deg) skewY(30deg);transform:translateX(50%) rotate(-60deg) skewY(30deg);}
.hex:nth-child(5n+4):last-child,.hex:nth-child(5n+5):last-child{margin-bottom:0;}
.hex:nth-child(5n+4){margin-right:1%;margin-left:0.5%;}
.hex:nth-child(5n+2){margin-left:1%;margin-right:1%;}
.hex:nth-child(5n+6){clear:left;}
}
@media (max-width:600px){/* <- 2-1 hexagons per row */
.hex{width:49.5%;/* = (100-1) / 2 */
padding-bottom:57.158%;/* = width / sin(60) */
}
.hex:nth-child(3n+3){margin-top:-13.423%;margin-bottom:-13.423%;-webkit-transform:translateX(50%) rotate(-60deg) skewY(30deg);-ms-transform:translateX(50%) rotate(-60deg) skewY(30deg);transform:translateX(50%) rotate(-60deg) skewY(30deg);}
.hex:nth-child(3n+3):last-child{margin-bottom:0;}
.hex:nth-child(3n+3){margin-left:0.5%;}
.hex:nth-child(3n+2){margin-left:1%;}
.hex:nth-child(3n+4){clear:left;}
}
@media (max-width:400px){#hexGrid{font-size:13px;}
}
分享到QQ
分享到微博
微信扫一扫
