“This is the 11th day of my participation in the Gengwen Challenge. For more details, see” Gengwen Challenge “.
Interview build rocket
Resigned to find a new job, front-end interview is not easy to pass a few rounds, finally turn to the final face, heart nervous. The interviewer sat at a distance from me and looked at me seriously.
- Interviewer: It is said that your first few rounds of feedback have been very good.
- Me: No, no. Thank the previous interviewers for their courtesy.
- Interviewer: Here we go. Do you know how the Promise came about?
- Me (thinking to myself, you underestimate me) : Balabala, talk, skip 500 words here
- Interviewer: Do you know how Webpack works, kid?
- Me (inner voice: good to be prepared, otherwise I would have hung up) : Balabala, save 800 words
- Interviewer: Do you know what happens to the browser between typing in the URL and rendering the page?
- I: balabala, here omit the classic answer 1000 words
After six or seven back and forth questions and answers, “modularity know”, “understand the event cycle mechanism”, “know Babel”, not a list, fortunately, they do not fight unprepared.
But do not know why the interviewer with my answer flow, the face has become more and more dignified by the light cloud.
Finally, after thinking for dozens of seconds, the interviewer dropped a surprise question, “So, young man, you’ve answered all the previous questions ok, but can you build a rocket?”
I dumbfounded, weak weak of asked a sentence, “with CSS draw of calculate”.
The interviewer looked at my slightly flustered expression and smiled an unobtrusive smile.
I searched and found a picture like this.
“Could it be a rocket like this?” the interviewer wouldn’t answer, so I had to continue with my notebook.
How do I build a rocket
1. Set up the initial structure of 🚀
The HTML body structure is divided into three columns, left, center and right. The whole 🚀 is in the center of the screen
<div class="wrapper">
<div class="rocket">
<div class="body side left"></div>
<div class="body main"></div>
<div class="body side right"></div>
</div>
</div>
Copy the codeCSS styles are as follows:
/* Global */
:root {
--rocket-size: 10vw;
--sky-color: #1C1740;
--rocket-color: #F9E2FE;
}
/* Background style */
body {
display: flex;
overflow: hidden;
background-color: var(--sky-color);
}
/* Container center */
.wrapper {
position: absolute;
top: 50%;
left: 50%;
will-change: transform;
transition: transform 0.4 s ease;
transform: translate(-50%, -50%);
}
/* Three horizontal layout of rockets */
.rocket {
display: flex;
}
/* Rocket three column common style */
.rocket .body {
position: relative;
background-color: var(--rocket-color);
}
/* Column width and height in rocket */
.rocket .main {
width: var(--rocket-size);
height: calc(var(--rocket-size) * 1.5);
}
/* Width and height of rocket side column */
.rocket .side {
width: calc(var(--rocket-size) / 3);
height: var(--rocket-size);
}
/* Left column position of rocket */
.rocket .left {
margin-right: 10px;
}
/* Rocket right column position */
.rocket .right {
margin-left: 10px;
}
Copy the codeThe preview looks like this:
2. Polish the body of 🚀
To start polishing the body, add the following styles:
:root{... --rocket-cap-color: crimson;
}
.rocket .body{...border-radius: 0 0 50% 50% / 76% 76% 15% 15%;
Add rounded corners */ to the ends of the left, center, and right columns
}
Add rounded corners */ to the protrusions of the left, center, and right columns
.rocket .body:before {
content: ' ';
position: absolute;
border-radius: 50% 50% 50% 50% / 76% 76% 25% 25%;
}
/* Size and position of the rocket body projection */
.rocket .main:before {
bottom: 80%;
width: 100%;
height: 75%;
background-color: inherit;
}
/* Size, position and color of the left and right column protrusion */
.rocket .side:before {
bottom: 90%;
width: 100%;
height: 35%;
background-color: var(--rocket-cap-color);
}
Copy the codeThe preview looks like this:
3. Add the 🚀 Logo
/* Added definition of rocket logo color */
:root{... --rocket-logo-color: #4C3198;
}
/* The specific position and style of logo */
.rocket .main:after {
content: ' ';
position: absolute;
bottom: 75%;
left: 0;
right: 0;
margin: auto;
border: calc(var(--rocket-size) / 15) solid var(--rocket-logo-color);
width: calc(var(--rocket-size) / 1.8);
height: calc(var(--rocket-size) / 1.8);
box-shadow: inset rgba(0.0.0.0.075) -2vw -2vw 0 0, inset rgba(0.0.0.0.1) -1vw -1.5 vw 0 0;
border-radius: 100%;
}
Copy the codeThe preview looks like this:
4. Add 🚀 wings
Add two new dom under dom.body. main, leftWing rightWing for left and right wings.
<div class="wrapper">
<div class="rocket">
<div class="body side left"></div>
<div class="body main">
<div class="wing leftWing"></div>
<div class="wing rightWing"></div>
</div>
<div class="body side right"></div>
</div>
</div>
Copy the code/* Add rocket wing color */
:root{... --rocket-wing-color: #4C3198;
}
/* Rocket left and right column back to the correct position */
.rocket .left {
/* margin-right: 10px; * /
left: 1px;
}
.rocket .right {
/* margin-left: 10px; * /
right: 1px;
}
/* Rocket wing style */
.rocket .wing {
position: absolute;
bottom: 2vmin;
background-color: var(--rocket-wing-color);
width: calc(var(--rocket-size) / 2);
height: calc(var(--rocket-size) / 1.5);
z-index: 1;
box-shadow: inset rgba(0.0.0.0.1) -0.5 vmin 1vmin 1vmin 0, inset rgba(255.255.255.0.1) 0.5 vmin 1vmin 1vmin 0;
}
/* Left wing position of rocket */
.rocket .wing.leftWing {
right: 100%;
border-radius: 100% 0 10% 10%;
}
/* Right wing position of rocket */
.rocket .wing.rightWing {
left: 100%;
border-radius: 0 100% 10% 10%;
}
Copy the codeThe effect is as follows:
5. Add the 🚀 booster
<div class="wrapper">
<div class="rocket">
<div class="body side left"></div>
<div class="body main">
<div class="wing leftWing"></div>
<div class="wing rightWing"></div>
<div class="booster"></div>
</div>
<div class="body side right"></div>
</div>
</div>
Copy the code
:root {
/* Booster color */
--rocket-booster-color: #C38382;
}
/* Booster style and position */
.rocket .booster {
position: absolute;
top: 80%;
left: 0;
right: 0;
margin: auto;
width: calc(var(--rocket-size) / 1.2);
height: calc(var(--rocket-size) / 2.5);
background-color: var(--rocket-booster-color);
border-radius: 0 0 50% 50% / 76% 76% 35% 35%;
z-index: -1;
box-shadow: inset rgba(0.0.0.0.3) -0.5 vmin 1vmin 1vmin 0, inset rgba(255.255.255.0.3) 0.5 vmin 1vmin 1vmin 0, black 0 0 2vmin;
}
Copy the codeThe preview looks like this:
6. Add 🚀 tail 🔥
<div class="wrapper">
<div class="rocket">
<div class="body side left"></div>
<div class="body main">
<div class="wing leftWing"></div>
<div class="wing rightWing"></div>
<div class="booster"></div>
<div class="fire"></div>
</div>
<div class="body side right"></div>
</div>
</div>
Copy the codeAdd flame-related CSS
/* Flame style and animation */
.rocket .fire {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: auto;
width: calc(var(--rocket-size) / 1.4);
height: 80%;
border-radius: 0 0 100% 100%;
background-image: linear-gradient(to bottom, yellow, transparent 70%);
z-index: -2;
transform-origin: 50% 0;
animation: fire 0.1 s linear alternate infinite;
}
@keyframes fire {
to {
transform: scaleX(0.98) translateY(-1vmin); }}Copy the codeThe final result is as follows:
The overall effect can be previewed with the Code Pen Demo: CSS only Rocket.
The interview results
It was my turn to look at the interviewer with an air of pride and think, “Well, now it’s my turn to be a bully when it comes to the Offer negotiation.”
The interviewer also showed a mysterious smile at this time, “The young man has a good hand in building rockets, but our company is small, only recruit screw, you’d better find another job”
I was shocked. Time stood still, silence followed by an eerie silence.
The only thing I want to say after that is that the strength I got at the gym is really good.
Ps: This article is purely fictitious, hope the interviewer job seekers get along harmoniously, create a better society.
If you’re happy, I hope you like it. Gratitude.