位元組不給大夥發月餅？那我親自給大夥發！

☀️ 前言

• 本來最近忙着複習面試題，再加上想要完善自己的開源項目确實是沒有什麼時間寫文章。
• ‘‘叮叮’’，在我枯燥乏味的刷題的時候彈出一條資訊：

• ​

  ​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端打開喔~）

???? 寫在最後

• 首先還是很感謝大家看到這裡，這次的文章就分享到這裡，祝大家中秋節快樂！！
• 以上就是我送給大家的 “位元組跳動中秋月餅禮盒” ，希望大家喜歡，如果可以請務必給我一個免費的點贊和評論！！
• 如果您覺得這篇文章有幫助到您的的話不妨????關注+點贊+收藏+評論+轉發????支援一下喲~~????您的支援就是我更新的最大動力。
• 如果想跟我一起讨論和學習更多的前端知識可以加入我的​​前端交流學習群​​，大家一起暢談天下~~~