字节不给大伙发月饼？那我亲自给大伙发！

☀️ 前言

• 本来最近忙着复习面试题，再加上想要完善自己的开源项目确实是没有什么时间写文章。
• ‘‘叮叮’’，在我枯燥乏味的刷题的时候弹出一条信息：

• ​

  ​Troy​

  ​老哥来催更了，那好吧，就当是在刷题的过程中增加多点乐趣吧????。
• 于是我就想啊想啊怎样才能出一个跟中秋有关的文章呢？前有嫦娥三心哥，后有中秋献礼寒草哥，再有掘金可视化双子星之一fly哥的3d月球环绕,再看到活动页面的获奖规则，拿奖是不可能拿奖了，蹭个杯子周边可能还行????。突然看到之前的沸点活动是有机会得到字节跳动中秋礼盒，我寻思着，我得不到就不能做一个自己看看吗？
• ok！！Let‘s go让我们来做一个字节跳动中秋礼盒，字节不给大伙发月饼？那我亲自给大伙发！人人都有！！！(标题出自三心哥????‍♂️)

???? 可笑又滑稽的设计之路

• 道理我都懂，可是我没有礼盒怎么做出来呀？？！！????‍♂️能提供帮助的只有活动页的这张图片，剩下的大多只能靠我自己的想像了。

准备材料

• 首先我们需要准备一些礼盒的图片和背景，要做一个简单版的字节礼盒需要的大致有以下三点：

• 月饼礼盒封面贴图
• 第二层月饼贴图
• 字节贺卡贴图

• 有的同学就会问了：啊？小卢，你没有收到字节的中秋月饼礼盒你是怎么来的图片呀？????
• 这个问题问得好啊，我一开始在准备制作的时候也想了很久，我自己也不知道从哪获取这些图片。
• 但是聪明的我找到某红书上面有一些博主分享的字节礼盒开箱炫耀视频，在他们分享的照片上，我用手机对着电脑一张一张的扫描并保存到备忘录里面......????

• 就这样勉强凑齐第一层和第二层的贴图，还剩下一个蓝色贺卡。

请求帮助

• 在我看到上面那张图片里面的贺卡的时候我一直以为是双面折叠打开的，奈何我无法找到清晰地封面图和里面的内容，我就在热点求助了。

• 很不错呀，过了6个小时没有一个人回复我????，正在苦恼的时候​

  ​Troy​

  ​老哥发了我一张图：

• 我才发现原来这张贺卡不仅仅只是一张贺卡而已，该主题的月饼礼盒的全部绘画都是益童儿童所绘画的，这些儿童们因为家庭的原因可能得不到我们习以为常的童年陪伴，而字节跳动也为此发起了公益项目。
• 是我格局小了，我没想到其中会有这样的故事，为字节点赞！！????
• 那么话说回来，这样的贺卡该怎么制作呢？我找遍了全网也就只有这张图片是最清楚的，而那些挡住的画面我也不可能脑补出来，如果我自己乱来那就相当于玷污了这张充满故事的卡片，我只能换一种方式来呈现这个卡片了。
• 我们可以保留字节的​

  ​logo​

  ​​和英文，里面的内容就我们自己发挥即可，主要还是体现中秋节的氛围。而又一个问题来了，从上图可以看到字节的​

  ​logo​

  ​左上方也是被挡住的，而背景色是各种颜色组装而成，如果想要这样一张图片我能做到吗？
• 是的我不能❌！我只能求助我家那位设计大人????了。

• 为了这个封面最后还请了她吃雪糕才答应我，不过一切都准备就绪了，我们可以开始​

  ​Codeing​

  ​了。

???? Talk is cheap. Show me the code！

月饼礼盒

• 我们观察图片中的月饼礼盒不难发现，其实也就是一些立体的长方体堆砌而成，而当我们把它们放在同一个平面的时候会有一个层级的概念，也就是谁在上谁在下，那我们就了解清楚了。

• 一个主容器
• 第二层的月饼层容器
• 最上面的封面层

主容器

• 熟悉​

  ​css​

  ​​的小伙伴可能很了解了，制作一个​

  ​3d​

  ​​立体长方体无非就是通过​

  ​transform-style: preserve-3d​

  ​​将一个容器设置为​

  ​3d​

  ​,将子元素都设置绝对定位并分别给予不同的角度拼接起来即可。

<!-- byteDance.html-->
<ul class="outerPack">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>      

• 这里就拿外层的长方体来举例，接下来的其他长方体大致都差不多就是位置跟角度需要调整就不放源码了，具体可以看到文末的源码。

/* moonCake.css */
.outerPack{
    width: 200px;
    height: 200px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    /* 将子元素转为3D */
    transform-style: preserve-3d;
}
.outerPack{
    /* 让外包装整体向下转45度,向右转45度 */
    transform: rotateX(-45deg) rotateY(225deg);
    animation-fill-mode:forwards;
}
.outerPack li {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 200px;
    position: absolute; /*让所有的子元素都重叠在一起*/
    box-sizing: border-box;
    border: 1px solid #2b2213;
    left: 0;
    right: 0;
}
/* 背面 */
.outerPack li:nth-child(1) {
    height: 100px;
    transform: translateZ(100px) translateY(-50px);
    background-size: cover;
}
/* 正面 */
.outerPack li:nth-child(2) {
    height: 100px;
    transform: translateZ(-100px)translateY(-50px);
    background-size: cover;
    border: 1px solid #55545c;
}
/*右面*/
.outerPack li:nth-child(3) {
    height: 100px;
    transform: rotateY(-90deg) translateZ(100px) translateY(-50px);
    background-size: cover;
}
/*左面*/
.outerPack li:nth-child(4) {
    height: 100px;
    transform: rotateY(90deg) translateZ(100px) translateY(-50px);
    background-size: cover;
}
/* 上面 */
.outerPack li:nth-child(5) {
    height: 200px;
    transform: rotateX(-90deg) translateZ(-151px);
    background-size: cover;
    border: 1px solid #55545c;
    padding: 10px;

}
/*下面*/
.outerPack li:nth-child(6) {
    height: 200px;
    transform: rotateX(-90deg) translateZ(-50px);
    background-size: cover;
}      

• 很轻松的一个长方体就制作完成了，对了顺便说一句，如果自己拿捏不准角度的话可以让它转动起来比较容易观察。

/* moonCake.css */
@keyframes rotate {
    0% { transform:rotateX(-45deg) rotateY(225deg); }
    50% { transform:rotateX(-45deg) rotateY(105deg); }
    100% { transform:rotateX(-45deg) rotateY(225deg); }
}      

第二层的月饼层容器

• 这样我们的外层就做好了，为什么要把他跟第二层拆分开来呢？那是因为我们要分别对每层的元素进行一个动画效果所以需要分的很清楚。
• 第二层的容器也是一样的，做一个一半的主容器进行组装即可，大部分代码都是差不多的，有兴趣的小伙伴可以到文末查看源码，值得注意的是我们的层级关系需要​

  ​z-index: 2​

  ​让第二层部分是在我们的视线上方的。
• 我们顺便给第二层做一个拉出来的特效。

/* moonCake.css */
.moveOut{
    animation: moveOut 1s  linear!important;
    animation-fill-mode:forwards!important;
}

@keyframes moveOut{
    0%{ transform: rotateX(-45deg) rotateY(225deg) translateY(280px); }
    50%{ transform: rotateX(-45deg) rotateY(225deg) translateY(280px) translateZ(-100px); }
    100%{ transform: rotateX(-45deg) rotateY(225deg) translateY(280px) translateZ(-200px); }
}      

• 怎么实现的其实也很简单，通过​

  ​js​

  ​​配合点击事件添加​

  ​class​

  ​进行动画拉出即可。

最上面的封面层

• 这个封面就更简单的，只需要一个长方形调整角度即可，由于我的贴图素材原因这里采用了​

  ​img​

  ​​添加图片，如果是贴图完美的话可以直接用背景来实现封面图,具体的代码太简单了也不展示了，但也是值得注意的是层级需要设为​

  ​z-index:3​

  ​

<!-- byteDance.html-->
<ul class="top" id="top">
    <li>
        <img src="./images/byte.jpg" alt="">
    </li>
</ul>      

细节处理

• 这个盒子其实处理的差不多了，剩下的就是更改背景色，添加边框，对于第二层的月饼，一开始也打算把所有月饼做出来的，方法也是一样制作长方体只是比较繁琐罢了，由于时间原因和贴图的不合适我直接用两个图片代替了（就是懒）。
• 那我们最后来看看成果吧~感觉还可以

字节卡片

• 这个卡片的设计我一直都认为是翻页式设计，于是我画了张图给大家理解一下，emm...画的不太好大家凑合看吧。

• 这种就算是比较简单了，一个容器里面有左右两页，一开始是重叠在一起的，当我们交互的时候会将左边的打开，其实也就是增加一个旋转角度而已，大部分都是基础的样式，我把主要代码贴一下吧。

<!-- byteDance.html-->
<div class="card" id="card">
    <div class="imgBox" id="imgBox">
        <!-- 左侧 -->
    </div>
    <div class="details">
        <!-- 右侧内容 -->
    </div>
</div>      

• 这里旋转的时候需要注意，因为我们需要卡片往左翻转，也就是以​

  ​y​

  ​​轴为中心轴,所以我们要给他的基点设置为​

  ​left​

  ​
• 为了让卡片更加立体，我们可以使用​

  ​perspective​

  ​​来改变我们观看立体图形的位置，让这个​

  ​3d​

  ​效果更加明显，关键代码如下：

/* card.css */
.card{
   ...
   z-index: 4;
   transform-style:preserve-3d;
   perspective:1700px;
   ...
}
.card .imgBox{
  width:100%;
  height:100%;
  position:relative;
  transform-origin:left;
  background-color: #2d6da7;
  background-size:100% 100%;  
  transition:1s;
}
.card:hover .imgBox{
  transform:rotatey(-135deg);
}      

• 为了效果好点我还加上了阴影的感觉，我们来看看基础的卡片如何吧。

• 感觉效果还是不错的，接下来只需要替换里面的内容即可，拿出我家设计大人帮忙p的图片和网上的素材进行组装。
• 为了动态改变左侧页面的背景，我们需要在鼠标移入移出的时候使用​

  ​js​

  ​动态更换背景图片。

• 感觉非常不错！！！！要的就是这个效果，换上了图片完全不是一个​

  ​level​

  ​,接下来只需要添加小卢想给大家的中秋贺语就完成啦。

最终效果

• ​​源码地址 ​​  
• ​​展示地址​​（请在PC端打开喔~）

???? 写在最后

• 首先还是很感谢大家看到这里，这次的文章就分享到这里，祝大家中秋节快乐！！
• 以上就是我送给大家的 “字节跳动中秋月饼礼盒” ，希望大家喜欢，如果可以请务必给我一个免费的点赞和评论！！
• 如果您觉得这篇文章有帮助到您的的话不妨????关注+点赞+收藏+评论+转发????支持一下哟~~????您的支持就是我更新的最大动力。
• 如果想跟我一起讨论和学习更多的前端知识可以加入我的​​前端交流学习群​​，大家一起畅谈天下~~~