I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

☀ ️ preface

  • I haven’t had much time to write since I was busy reviewing interview questions and trying to improve my open source project.
  • ‘ding ding’, a message popped up while I was boring the question:

  • TroyElder brother to urge more, that is all right, be in the process of brush a problem to increase more fun 👌.
  • So I think ah ah ah ah how to give an article about the Mid-Autumn Festival? Before have chang e three heart elder brother, after Mid-Autumn festival present cold grass elder brother, again dig gold visualization twin star one of fly elder brother’s 3D moon surround, see the award rule of activity page again, take an award is impossible to take an award, ceng a cup periphery may return line 🏃. Suddenly I saw that there was a chance to get bytedance Mid-Autumn Festival gift box before the boiling point activity, I thought, I can not get one to have a look?
  • Ok!!!!! Let’s make a Bytedance Mid-Autumn Festival gift box, byte will not send moon cakes to everyone? I’ll send it to everyone myself! Everyone has it!! (Title from Sanxin 🧖♂️)

🎑 Laughable and hilarious design path

  • I understand the truth, but HOW can I do it without a gift box? !!!!! 🤷♂️ can only help with this picture on the activity page, the rest is mostly left to my imagination.

Prepare the material

  • First of all, we need to prepare some pictures and backgrounds of gift boxes. To make a simple version of byte gift boxes, there are roughly the following three points:
    • Mooncake gift box cover map
    • Second layer of moon cake texture
    • Byte card map
  • Some students will ask: ah? Xiao Lu, you did not receive byte Mid-Autumn moon cake gift box how did you get the picture? 😅
  • That’s a good question, I thought a lot about it when I was preparing to make it, and I didn’t know where to get the images myself.
  • But I was smart enough to find a red book with some bloggers sharing the byte gift box showing off video, in the photos they shared, I used my phone to the computer one by one to scan and save into the memo…… 😥

  • I barely got the first and second tiles together, leaving a blue card.

Ask for help

  • When I saw the card in the picture above, I always thought it was double-folded and opened, but I couldn’t find the cover picture and contents clearly, so I asked for help in the hot spot.

  • Very good ah, led 6 hours without a person to reply me 👍, is distressed of timeTroyBrother sent me a picture:

  • I found out that the card was not just a greeting card. All the pictures in the mooncake gift box were drawn by children who might not get the childhood company we take for granted due to family reasons, and Bytedance also launched a public welfare project for this purpose.
  • Is my pattern small, I did not expect that there will be such a story, for byte thumbs up!! 👍
  • So how do you make a card like this? I searched all over the Internet and only this picture was the most clear, and I couldn’t imagine the pictures that blocked it. If I messed with it, IT would be like tarnishing this card full of stories, and I would have to present it in another way.
  • We can keep the byteslogoAnd English, the content of our own play, mainly reflects the atmosphere of the Mid-Autumn Festival. Here’s another problem. You can see the bytes in the figure abovelogoThe top left is also blocked, and the background color is made up of various colors. If I want such a picture, can I do it?
  • Yes I can’t ❌! I can only ask my family that design adult 👑.

  • I ended up buying her ice cream for the cover, but with everything set up, we’re good to goCodeing.

💻 Talk is cheap. Show me the code!

The moon cake gift box

  • When we observe the moon cake gift box in the picture, it is not difficult to find that it is actually a pile of some three-dimensional cuboids, and when we put them on the same plane, there will be oneThe hierarchyWho’s up and who’s down, then we get it.
    • A master container
    • The second layer of the moon cake layer container
    • The top cover

The main container

  • Be familiar withcssYour friends probably know a lot about it. Make one3dThe cuboid just goes throughtransform-style: preserve-3dSet a container to3d, set the absolute positioning of the child elements and splice them together at different angles.
<! -- byteDance.html-->
<ul class="outerPack">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Copy the code
  • Here to take the outer cuboid for example, the following other cuboids are roughly the same position and Angle need to adjust the source code, you can see the end of the source code.
/* moonCake.css */
.outerPack{
    width: 200px;
    height: 200px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    /* Convert the child element to 3D */
    transform-style: preserve-3d; 
}
.outerPack{
    /* Make the whole package turn 45 degrees downward and 45 degrees to the right */
    transform: rotateX(-45deg) rotateY(225deg); 
    animation-fill-mode:forwards;
}
.outerPack li {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 200px;
    position: absolute; /* let all the children overlap */
    box-sizing: border-box;
    border: 1px solid #2b2213;
    left: 0;
    right: 0;
}
/ * * / on the back
.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;
}
/ * right * /
.outerPack li:nth-child(3) {
    height: 100px;
    transform: rotateY(-90deg) translateZ(100px) translateY(-50px);
    background-size: cover;
}
Left / * * /
.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;
​
}
/ * * / below
.outerPack li:nth-child(6) {
    height: 200px;
    transform: rotateX(-90deg) translateZ(-50px); 
    background-size: cover;
}
Copy the code
  • It’s very easy to make a cuboid. By the way, if you don’t get the Angle right, you can make it rotate and observe it easily.
/* moonCake.css */
@keyframes rotate {
    0% { transform:rotateX(-45deg) rotateY(225deg); }
    50% { transform:rotateX(-45deg) rotateY(105deg); }
    100% { transform:rotateX(-45deg) rotateY(225deg); }}Copy the code

The second layer of the moon cake layer container

  • So we have the outer layer, why separate it from the second layer? That’s because we’re going to animate each layer of elements separately so it needs to be clear.
  • The container of the second layer is the same, do a half of the main container assembly, most of the code is about the same, interested partners can go to the end of the article to view the source code, it is worth noting that our hierarchy needsz-index: 2Let the second layer be above our line of sight.
  • Let’s also do a pull out effect for the second layer.
/* 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); }}Copy the code
  • How do you do that? It’s actually pretty easy. PassjsAdd with click eventsclassAnimate and pull it out.

The top cover

  • This cover is much simpler, just need a rectangle to adjust the Angle, which is used here for my texture materialimgIf the texture is perfect, you can use the background to create the cover image directly. The code is too simple to show, but it is worth noting that the hierarchy needs to be set toz-index:3
<! -- byteDance.html-->
<ul class="top" id="top">
    <li>
        <img src="./images/byte.jpg" alt="">
    </li>
</ul>
Copy the code

Detail processing

  • This box is actually processing about, all that remains is to change the background color, add the borders, for the second layer of moon cakes, the beginning is going to put all make mooncakes, methods as well as making cuboid just more cumbersome, due to time and map the inappropriate I use two images directly instead of (lazy).
  • So let’s have a look at the final result. It feels ok

Byte card

  • I’ve always thought of this card as a page-turning design, so I drew a picture for you to understand, EMM… It’s not a very good drawing but you can do it.

  • This one is relatively simple, there are two left and right pages in a container, at first, they overlap, and when we interact, we open the left side, which is actually a rotation Angle, most of it is basic style, I will post the main code.
<! -- byteDance.html-->
<div class="card" id="card">
    <div class="imgBox" id="imgBox">
        <! The left -- -- -- >
    </div>
    <div class="details">
        <! -- Right content -->
    </div>
</div>
Copy the code
  • You have to be careful with the rotation here, because we want the card to flip to the left, which is thetayAxis is the central axis, so we’re going to set his base point toleft
  • To make the card more three-dimensional, we can useperspectiveTo change where we view the stereograph, so that this3dThe key code is as follows:
/* 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);
}
Copy the code
  • I’ve added some shadows to make it look good, so let’s take a look at the base card.

  • I feel the effect is still good. Next, I just need to replace the contents inside, and assemble them with pictures of my designer helping P and materials on the Internet.
  • To dynamically change the background of the left page, we need to use it when the mouse moves in and outjsDynamic change background image.

  • Feel very good ！！！！ Want is this effect, put on the picture is not a completelylevel, next only need to add xiao Lu wants to give you the Mid-Autumn Festival message to complete.

The final result

  • The source address  
  • Display address (please open it on PC)

👋 is at the end

  • First of all, thank you very much to see here, this article is to share here, I wish you a happy Mid-Autumn Festival!!
  • Above is my “Bytedance Mid-Autumn Moon cake gift box”, I hope you like it, if you can, please be sure to give me a free like and comment!!
  • If you feel that this article has helped to your words might as well 🍉 attention + likes + favorites + comments + forward 🍉 support yo ~~😛 your support is the biggest power OF my update.

🌅 past wonderful

In order to drink two more cups of milk tea ☕, I wrote an automated script for my project

Draw 5 pictures to help you beat dynamic permission routing easily!

Product Manager: Can you get the word cloud moving?

Fix echarts map rotation highlighting ⚡