软件技术纯CSS制作蜂巢效果详解

五月花 发表 于:8年前 浏览量:53

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

这是一个100px × 100px,border为30px的div:

  1. height100px
  2. width100px
  3. border30px solid #999

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

  1. height100px
  2. width100px
  3. border-top30px solid #C66
  4. border-bottom30px solid #6C6
  5. border-left30px solid #66C
  6. border-right30px solid #CC6

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

  1. width0
  2. border-top30px solid #C66
  3. border-bottom30px solid #6C6
  4. border-left30px solid #66C
  5. border-right30px solid #CC6

删除border-top,再将border-left/border-right设置为透明:

  1. width0
  2. border-bottom30px solid #6C6
  3. border-left30px solid transparent
  4. border-right30px solid transparent

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

  1. width0
  2. border-bottom30px solid #6C6
  3. border-left52px solid transparent
  4. border-right52px solid transparent

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

  1. width0
  2. border-top30px solid #6C6
  3. border-left52px solid transparent
  4. border-right52px solid transparent

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

  1. width0
  2. border-bottom30px solid #6C6
  3. border-left52px solid transparent
  4. border-right52px solid transparent
  5.  
  6. width104px
  7. height60px
  8. background-color#6C6
  9.  
  10. width0
  11. border-top30px solid #6C6
  12. border-left52px solid transparent
  13. border-right52px solid transparent

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

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

  1. floatleft
  2. border-right30px solid #6C6
  3. border-top52px solid transparent
  4. border-bottom52px solid transparent
  5.  
  6. floatleft
  7. width60px
  8. height104px
  9. background-color#6C6
  10.  
  11. floatleft
  12. border-left30px solid #6C6
  13. border-top52px solid transparent
  14. border-bottom52px solid transparent

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

  1. .hex { 
  2.     floatleft
  3.     margin-left3px
  4.     margin-bottom-26px
  5. .hex .top { 
  6.     width0
  7.     border-bottom30px solid #6C6
  8.     border-left52px solid transparent
  9.     border-right52px solid transparent
  10. .hex .middle { 
  11.     width104px
  12.     height60px
  13.     background#6C6
  14. .hex .bottom { 
  15.     width0
  16.     border-top30px solid #6C6
  17.     border-left52px solid transparent
  18.     border-right52px solid transparent
  19. .hex-row { 
  20.     clearleft
  21. .hex-row.even { 
  22.     margin-left53px

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

  1. .hex { 
  2.     floatleft
  3.     margin-right-26px
  4.     margin-bottom-50px
  5. .hex .left { 
  6.     floatleft
  7.     width0
  8.     border-right30px solid #6C6
  9.     border-top52px solid transparent
  10.     border-bottom52px solid transparent
  11. .hex .middle { 
  12.     floatleft
  13.     width60px
  14.     height104px
  15.     background#6C6
  16. .hex .right { 
  17.     floatleft
  18.     width0
  19.     border-left30px solid #6C6
  20.     border-top52px solid transparent
  21.     border-bottom52px solid transparent
  22. .hex-row { 
  23.     clearleft
  24. .hex.even { 
  25.     margin-top53px

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

  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.     width0height0
  4.     border-bottom30px solid #6C6
  5.     border-left52px solid transparent
  6.     border-right52px solid transparent
  7.     positionabsolute
  8.     top: -30px
  9.  
  10. .hex { 
  11.     margin-top30px
  12.     width104px
  13.     height60px
  14.     background-color#6C6
  15.     positionrelative
  16.  
  17. .hex:after { 
  18.     content""
  19.     width0
  20.     positionabsolute
  21.     bottom: -30px
  22.     border-top30px solid #6C6
  23.     border-left52px solid transparent
  24.     border-right52px solid transparent

(未经允许不得转载。)

原文链接:jtauber.github.com



    本文由 五月花发表。转载请注明出处:https://www.mihua.net/list/0/3009.html

    发表评论

    您的昵称:

    猜你喜欢

    最近更新