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

Posted 2021-04-09 前端你别闹

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯CSS3画六角灯笼特效，详细教学相关的知识，希望对你有一定的参考价值。

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

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

这是高清静态版：

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