详解jtauber如何用纯CSS制作蜂巢效果

UI / UI设计教程 /      

iceman1025
 / 浙江 杭州

来源:uimaker.com   作者:web0752.com

关键词

详解jtauber如何用纯CSS制作蜂巢效果

标签：CSS 网站建设  蜂巢效果

导读：最近HTML5和CSS3是越来越普及，HTML5&CSS3 不会在大分辨率显示屏上出现马赛克等优点也渐渐被人注意到。很多网站都渐渐大量使用CSS3做网站美化，HTML5&CSS3的优秀作品层出不 穷！甚至有的网站已经完全抛弃图片，仅使用CSS和Javaｓｃｒｉｐｔ创造出简介而又华丽的界面。下面是国外作者@jtauber的使用CSS创作蜂巢 效果的技术介绍（左侧是最终效果图）：

这是一个100px × 100px，border为30px的div：

网站建设,css,蜂巢效果

 
  1. height: 100px; 
  2. width: 100px; 
  3. border: 30px solid #999; 

如果给每border附上不同的颜色的值：

网站建设,css,蜂巢效果

 
  1. height: 100px; 
  2. width: 100px; 
  3. border-top: 30px solid #C66; 
  4. border-bottom: 30px solid #6C6; 
  5. border-left: 30px solid #66C; 
  6. border-right: 30px solid #CC6; 

现在把height属性删除，并且将div的width设置为0，效果如下：

网站建设,css,蜂巢效果

 
  1. width: 0; 
  2. border-top: 30px solid #C66; 
  3. border-bottom: 30px solid #6C6; 
  4. border-left: 30px solid #66C; 
  5. border-right: 30px solid #CC6; 

删除border-top，再将border-left/border-right设置为透明：

网站建设,css,蜂巢效果

 
  1. width: 0; 
  2. border-bottom: 30px solid #6C6; 
  3. border-left: 30px solid transparent; 
  4. border-right: 30px solid transparent; 

两边的border不需要和bottom-border一样，bottom-border设置为30px，两边的52px，效果如下：

网站建设,css,蜂巢效果

 
  1. width: 0; 
  2. border-bottom: 30px solid #6C6; 
  3. border-left: 52px solid transparent; 
  4. border-right: 52px solid transparent; 

如果用top-border替换bottom-border：

网站建设,css,蜂巢效果

 
  1. width: 0; 
  2. border-top: 30px solid #6C6; 
  3. border-left: 52px solid transparent; 
  4. border-right: 52px solid transparent; 

在它们中创建一个104px × 60px的相同颜色的div你就能看到六边形的效果了：

网站建设,css,蜂巢效果

 
  1. width: 0; 
  2. border-bottom: 30px solid #6C6; 
  3. border-left: 52px solid transparent; 
  4. border-right: 52px solid transparent; 
  5.  
  6. width: 104px; 
  7. height: 60px; 
  8. background-color: #6C6; 
  9.  
  10. width: 0; 
  11. border-top: 30px solid #6C6; 
  12. border-left: 52px solid transparent; 
  13. border-right: 52px solid transparent; 

以上是在CSS中制作出六边形效果的全部过程。两侧和上/下面的border width30:52的比例约等于1:√3  rat，也是为表现出六边形效果准备的。

下面提供一个简单的将六边形旋转30°。我们只需要旋转一下方向，使用float: left并且将width: 0属性删除。

网站建设,css,蜂巢效果

 
  1. float: left; 
  2. border-right: 30px solid #6C6; 
  3. border-top: 52px solid transparent; 
  4. border-bottom: 52px solid transparent; 
  5.  
  6. float: left; 
  7. width: 60px; 
  8. height: 104px; 
  9. background-color: #6C6; 
  10.  
  11. float: left; 
  12. border-left: 30px solid #6C6; 
  13. border-top: 52px solid transparent; 
  14. border-bottom: 52px solid transparent; 

 

 

两种方向的六边形都可以很容易地拼贴在一起。第一种旋转方式的每个六边形上添加属性margin-left: 3px和margin-bottom: -26px，并且在偶数行还有margin-left: 53px。

网站建设,css,蜂巢效果

  1. .hex { 
  2.     float: left; 
  3.     margin-left: 3px; 
  4.     margin-bottom: -26px; 
  5. } 
  6. .hex .top { 
  7.     width: 0; 
  8.     border-bottom: 30px solid #6C6; 
  9.     border-left: 52px solid transparent; 
  10.     border-right: 52px solid transparent; 
  11. } 
  12. .hex .middle { 
  13.     width: 104px; 
  14.     height: 60px; 
  15.     background: #6C6; 
  16. } 
  17. .hex .bottom { 
  18.     width: 0; 
  19.     border-top: 30px solid #6C6; 
  20.     border-left: 52px solid transparent; 
  21.     border-right: 52px solid transparent; 
  22. } 
  23. .hex-row { 
  24.     clear: left; 
  25. } 
  26. .hex-row.even { 
  27.     margin-left: 53px; 
  28. } 

第二种旋转方式的每个六边形上添加 margin-right: -26px和margin-bottom: -50px的属性在偶数列还有margin-top: 53px。

网站建设,css,蜂巢效果

  1. .hex { 
  2.     float: left; 
  3.     margin-right: -26px; 
  4.     margin-bottom: -50px; 
  5. } 
  6. .hex .left { 
  7.     float: left; 
  8.     width: 0; 
  9.     border-right: 30px solid #6C6; 
  10.     border-top: 52px solid transparent; 
  11.     border-bottom: 52px solid transparent; 
  12. } 
  13. .hex .middle { 
  14.     float: left; 
  15.     width: 60px; 
  16.     height: 104px; 
  17.     background: #6C6; 
  18. } 
  19. .hex .right { 
  20.     float: left; 
  21.     width: 0; 
  22.     border-left: 30px solid #6C6; 
  23.     border-top: 52px solid transparent; 
  24.     border-bottom: 52px solid transparent; 
  25. } 
  26. .hex-row { 
  27.     clear: left; 
  28. } 
  29. .hex.even { 
  30.     margin-top: 53px; 
  31. } 

完成以上工作后还可以在.hex类添加以下代码再创造出3D透视效果。

网站建设,css,蜂巢效果

  1. -webkit-transform: perspective(600px) rotateX(60deg); 
  2. -moz-transform: perspective(600px) rotateX(60deg); 
  3. -ms-transform: perspective(600px) rotateX(60deg); 
  4. -o-transform: perspective(600px) rotateX(60deg); 
  5. transform: perspective(600px) rotateX(60deg); 
  6. Addendum 

Will Hardy建议使用 :before和 :after来减少所需使用的div为1个。

  1. .hex:before { 
  2.     content: " "; 
  3.     width: 0; height: 0; 
  4.     border-bottom: 30px solid #6C6; 
  5.     border-left: 52px solid transparent; 
  6.     border-right: 52px solid transparent; 
  7.     position: absolute; 
  8.     top: -30px; 
  9. } 
  10.  
  11. .hex { 
  12.     margin-top: 30px; 
  13.     width: 104px; 
  14.     height: 60px; 
  15.     background-color: #6C6; 
  16.     position: relative; 
  17. } 
  18.  
  19. .hex:after { 
  20.     content: ""; 
  21.     width: 0; 
  22.     position: absolute; 
  23.     bottom: -30px; 
  24.     border-top: 30px solid #6C6; 
  25.     border-left: 52px solid transparent; 
  26.     border-right: 52px solid transparent; 
  27. } 
更多有关网站设计资讯：网站设计之如何打造高性能的移动web用户体验

 

 

 收藏