前端面試官問『你會造火箭嗎』，我答『會的』，結果…
面試造火箭
離職了找新工作，前端面試好不容易過了幾輪，終于輪到終面了，內(nèi)心緊張。面試官略微有距離感坐在對面，嚴肅的看著我。
面試官：據(jù)說你前面的幾輪反饋都不錯哦。
我：沒有沒有。要感謝前面的面試官的客氣。
面試官：那開始了哦。你知道 Promise 怎么實現(xiàn)的嗎？
我(內(nèi)心想，你太小瞧我了)：balabala，侃侃而談，此處略去500字。
面試官：童鞋，那你知道 Webpack 的原理嗎？
我（內(nèi)心：還好有所準備，不然就掛了）：balabala，此處省去吹牛逼800字。
面試官：那你知道從輸入 url 地址到頁面渲染出來，瀏覽器發(fā)生了什么嗎？
我（內(nèi)心：媽嘞，還好昨天晚上突擊背誦了）：balabala，此處略去經(jīng)典答案1000字。
中間再經(jīng)過六七個來回的問答，『模塊化知道不』、『了解過事件循環(huán)機制嗎』、『曉得 Babel 否』，不一一列舉，還好自己不打無準備之仗。
但不知道為什么面試官隨著我的對答如流，臉色已經(jīng)由云淡風輕而變得越來越凝重。
最終面試官沉思了幾十秒，拋出了一個意外的問題，『小伙子，你前面的問題都回答的還可以，但你會造火箭嗎？』
我目瞪口呆，弱弱的問了句，『用 css 畫的算嗎』。
面試官看著我略微慌張的表情，嘴角揚起了不容易被人發(fā)現(xiàn)的笑。
我搜索找出了這樣一張圖。
問『可以是這樣的火箭嗎』，面試官不置可否，那我就只好用筆記本繼續(xù)下去。
我是如何造火箭的
1. 搭建 ?? 初始結構
HTML 主體結構分為左中右三欄，??整體在屏幕居中
<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>
CSS 樣式如下：
/* 全局樣式 */:root {--rocket-size: 10vw;--sky-color: #1C1740;--rocket-color: #F9E2FE;}/* 背景樣式 */body {display: flex;overflow: hidden;background-color: var(--sky-color);}/* 容器居中 */.wrapper {position: absolute;top: 50%;left: 50%;will-change: transform;transition: transform 0.4s ease;transform: translate(-50%, -50%);}/* 火箭三列水平布局 */.rocket {display: flex;}/* 火箭三列通用樣式 */.rocket .body {position: relative;background-color: var(--rocket-color);}/* 火箭中列寬高 */.rocket .main {width: var(--rocket-size);height: calc(var(--rocket-size) * 1.5);}/* 火箭邊列寬高 */.rocket .side {width: calc(var(--rocket-size) / 3);height: var(--rocket-size);}/* 火箭左列位置 */.rocket .left {margin-right: 10px;}/* 火箭右列位置 */.rocket .right {margin-left: 10px;}
預覽效果大致如下：
2. 潤色 ??主體
開始潤色主體，新增以下樣式：
:root {...--rocket-cap-color: crimson;}.rocket .body {...border-radius: 0 0 50% 50% / 76% 76% 15% 15%;/* 為左中右三列的尾部都添加好圓角 */}/* 為左中右三列的突出部都添加好圓角 */.rocket .body:before {content: '';position: absolute;border-radius: 50% 50% 50% 50% / 76% 76% 25% 25%;}/* 火箭主體突出部的大小、位置 */.rocket .main:before {bottom: 80%;width: 100%;height: 75%;background-color: inherit;}/* 火箭左右列突出部的大小、位置及顏色 */.rocket .side:before {bottom: 90%;width: 100%;height: 35%;background-color: var(--rocket-cap-color);}
預覽效果大致如下：
3. 添加 ?? Logo
/* 新增定義火箭 logo 顏色 */:root {...--rocket-logo-color:}/* 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.5vw 0 0;border-radius: 100%;}
預覽效果如下：
4. 添加 ?? 翅膀
在 dom .body.main 下面新增兩個 dom，leftWing rightWing 分別對應左右翅膀。
<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>
/* 添加火箭翅膀顏色 */:root {...--rocket-wing-color: #4C3198;}/* 火箭左右兩欄回到正確位置 */.rocket .left {/* margin-right: 10px; */left: 1px;}.rocket .right {/* margin-left: 10px; */right: 1px;}/* 火箭翅膀的樣式 */.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.5vmin 1vmin 1vmin 0, inset rgba(255, 255, 255, 0.1) 0.5vmin 1vmin 1vmin 0;}/* 火箭左翅膀位置 */.rocket .wing.leftWing {right: 100%;border-radius: 100% 0 10% 10%;}/* 火箭右翅膀位置 */.rocket .wing.rightWing {left: 100%;border-radius: 0 100% 10% 10%;}
效果如下：
5. 添加 ?? 助推器
在 .rightWing 后面添加 <div class="booster"></div> 助推器
<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>
:root {/* 助推器顏色 */--rocket-booster-color: #C38382;}/* 助推器樣式及位置 */.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.5vmin 1vmin 1vmin 0, inset rgba(255, 255, 255, 0.3) 0.5vmin 1vmin 1vmin 0, black 0 0 2vmin;}
預覽效果如下：
6. 添加 ?? 尾巴 ??
在 .booster 后面添加 <div class="fire"></div> 火焰
<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>
添加火焰相關的 CSS
/* 火焰樣式及動畫 */.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.1s linear alternate infinite;}@keyframes fire {to {transform: scaleX(0.98) translateY(-1vmin);}}
大功告成，最終的效果如下：
整體效果可以通過 code pen demo: css only rocket (https://codepen.io/SunLn/pen/xxqaLRa) 預覽。
面試結果
輪到我神氣的看著面試官了，心想，『都這樣了，等下Offer談薪資的時候就輪到我霸道了』。
面試官這個時候也露出了迷之微笑，『小伙子造火箭有一手，但我司這廟小，只招擰螺絲的，你還是另謀高就吧』
我震驚了，時光仿佛停滯一般，沉默之后更是可怕的沉默。
再之后的事情唯一想說的是，健身房練就的一身力氣真好使。
ps: 本文純屬虛構，希望面試官求職者和諧相處，共創(chuàng)美好社會。
如果有開心一下，希望點個贊。感恩。
作者：對馬彈琴
推薦閱讀：
微前端框架 single-spa：創(chuàng)建微前端容器應用。
恭喜你又在前端道路上進步了一點點。
點個“在看”和“贊”吧！