阅读 5578

前端面试官问『你会造火箭吗』,我答『会的』,结果…

“这是我参与更文挑战的第11天,活动详情查看: 更文挑战

面试造火箭

离职了找新工作,前端面试好不容易过了几轮,终于轮到终面了,内心紧张。面试官略微有距离感坐在对面,严肃的看着我。

  • 面试官:据说你前面的几轮反馈都不错哦。
  • :没有没有。要感谢前面的面试官的客气。
  • 面试官:那开始了哦。你知道 Promise 怎么实现的吗?
  • (内心想,你太小瞧我了):balabala,侃侃而谈,此处略去500字
  • 面试官: 童鞋,那你知道 Webpack 的原理吗?
  • (内心:还好有所准备,不然就挂了):balabala,此处省去吹牛逼800字
  • 面试官:那你知道从输入url 地址到页面渲染出来,浏览器发生了什么吗?
  • (内心:妈嘞,还好昨天晚上突击背诵了):balabala,此处略去经典答案1000字

中间再经过六七个来回的问答,『模块化知道不』、『了解过事件循环机制吗』、『晓得 Babel 否』,不一一列举,还好自己不打无准备之仗。

但不知道为什么面试官随着我的对答如流,脸色已经由云淡风轻而变得越来越凝重。

最终面试官沉思了几十秒,抛出了一个意外的问题,『小伙子,你前面的问题都回答的还可以,但你会造火箭吗?』

我目瞪口呆,弱弱的问了句,『用 css 画的算吗』。

面试官看着我略微慌张的表情,嘴角扬起了不容易被人发现的笑。

我搜索找出了这样一张图。

step0.png

问『可以是这样的火箭吗』,面试官不置可否,那我就只好用笔记本继续下去。

我是如何造火箭的

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;
}
复制代码

预览效果大致如下:

step1.png

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);
}

复制代码

预览效果大致如下:

step2.png

3. 添加🚀 Logo

/*   新增定义火箭 logo 颜色 */
:root {
  ...
  --rocket-logo-color: #4C3198;
}

/*  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%;
}

复制代码

预览效果如下:

step3-logo.png

4. 添加🚀翅膀

dom .body.main 下面新增两个 domleftWing 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%;
}
复制代码

效果如下:

step3-wing.png

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;
}
复制代码

预览效果如下:

step5-booster.png

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);
    }
}
复制代码

大功告成,最终的效果如下:

Kapture 2021-06-10 at 20.20.11.gif

整体效果可以通过 code pen demo: css only rocket 预览。

面试结果

轮到我神气的看着面试官了,心想,『都这样了,等下Offer谈薪资的时候就轮到我霸道了』。

面试官这个时候也露出了迷之微笑,『小伙子造火箭有一手,但我司这庙小,只招拧螺丝的,你还是另谋高就吧』

我震惊了,时光仿佛停滞一般,沉默之后更是可怕的沉默。

再之后的事情唯一想说的是,健身房练就的一身力气真好使。


ps: 本文纯属虚构,希望面试官求职者和谐相处,共创美好社会。

如果有开心一下,希望点个赞。感恩。

文章分类
前端
文章标签