纯CSS3画六角灯笼特效，详细教学_小言_互联网的博客

纯CSS3画六角灯笼特效，详细教学

2020-04-01 15:16 242人阅读评论(0)

这个效果是我一个同事没事画着搞的。

我们先看效果， 不想看实现过程的，直接拉到最底下点击查看原文。

这是高清静态版：

起初，我就是想做一个节目中那样2D的卡通大红灯笼。在百度效果图的时候，发现了这种古典灯笼。真的十分漂亮，就临时换了目标。

要实现这个效果，需要熟悉CSS3的transform样式和一丢丢的空间的想象能力。

第一步，我们完成一个正六边形

先画出一个长方形div，然后再复制5个。将他们以中心为原点，依次旋转60度。然后像Z轴方向偏移一下。

具体的偏移量，根据你div的宽度，简单的三角函数换算一下。

比如：我的div宽度为80，则需要Z轴移动的距离为40/Math.tan(Math.PI*30/180)=69

    .surface {	
      position: absolute;	
      left: -40px;	
      top: -100px;	
      width: 80px;	
      height: 150px;	
      background: radial-gradient(#fffea1, #fffea1, #fbd342);	
      transform-origin: center;	
      overflow: hidden;	
    }	
    .front {transform: rotateY(0) translateZ(69px);}	
    .right-front {transform: rotateY(60deg) translateZ(69px);}	
    .right-rear {transform: rotateY(120deg) translateZ(69px);}	
    .rear {transform: rotateY(180deg) translateZ(69px);}	
    .left-rear {transform: rotateY(-120deg) translateZ(69px);}	
    .left-front {transform: rotateY(-60deg) translateZ(69px);}

顶部和底面，我也做了两个六边形的面，本来计划是盖住的，不过最终成像时候不太好看，我就去掉了。

六边形之前的文章已经提到过了。使用border属性，画出两个梯形，拼凑起来，就是六边形。

第二步，我们对这个灯笼做一些修饰。

这里就偷个懒，使用圆和方块来做装饰。

每个矩形的before和after。我来做两个矩形的框，用来表示灯笼的木质骨架。

然后在四个角。分别放四个装饰用的圆。超出矩形的部分隐藏。

  .surface-decoration {	
      position: absolute;	
      width: 40px;	
      height: 40px;	
      border-radius: 50%;	
      border: solid 3px #e36d00;	
    }	
    .surface-decoration.left-top {	
      left: -20px;	
      top: -20px;	
    }	
    .surface-decoration.right-top {	
      right: -20px;	
      top: -20px;	
    }	
    .surface-decoration.left-bottom {	
      left: -20px;	
      bottom: -20px;	
    }	
    .surface-decoration.right-bottom {	
      right: -20px;	
      bottom: -20px;	
    }