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

转载

小北[机智] 2022-11-14 17:21:56

文章标签 代码仓库 d3 百度 文章分类 代码人生

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

我们先看效果

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

这是高清静态版：

纯CSS3画六角灯笼特效，详细教学_代码仓库_02

起初，我就是想做一个节目中那样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);}

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

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

六边形之前的文章已经提到过了。使用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;    
    }