«Это 11-й день, когда я участвую в Gengwen Challenge, пожалуйста, проверьте подробности мероприятия:Обновить вызов"
Интервью для постройки ракеты
После увольнения и поиска новой работы, после нескольких раундов предварительных собеседований, это был, наконец, последний поворот, и я нервничал. Интервьюер сел напротив него с легким чувством дистанции и серьезно посмотрел на меня.
- интервьюер: Говорят, что ваши предыдущие отзывы были хорошими.
- я:Нет нет. Спасибо интервьюеру за вашу доброту.
- интервьюер: Это начало. Вы знаете, как реализованы промисы?
- я(в душе думаю, ты меня слишком недооцениваешь): балабала, говори свободно, тут 500 слов пропущено
- интервьюер: Детская обувь, вы знаете принцип Webpack?
- я(сердце: к счастью, будь готов, а то повешу): балабала, прибереги сюда 800 слов хвастовства
- интервьюер: Тогда вы знаете, что происходит с браузером от ввода URL-адреса до рендеринга страницы?
- я(Разум: Мама, к счастью, я прочитал это вчера вечером): балабала, здесь опущено 1000 слов классического ответа.
В середине было шесть или семь вопросов и ответов: «Знаете ли вы модульность?», «Знаете ли вы механизм цикла событий?», «Знаете ли вы Babel?».
Но я не знаю, почему лицо интервьюера становилось все более и более достойным, когда я отвечал на вопрос.
В конце интервьюер задумался на десятки секунд и задал неожиданный вопрос: «Молодой человек, вы можете ответить на все предыдущие вопросы, но можете ли вы построить ракету? 』
Я был ошеломлен и слабо спросил: «Это считается с css?»
Интервьюер посмотрел на мое слегка взволнованное выражение лица, и уголки его рта приподняли улыбку, которую было нелегко обнаружить.
Я поискал и нашел такую картинку.
На вопрос «Может ли это быть такая ракета», интервьюер не определился, поэтому мне пришлось продолжить свой блокнот.
как я построил ракету
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: #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%;
}
Эффект предварительного просмотра выглядит следующим образом:
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Предварительный просмотр.
результат интервью
Моя очередь смотреть на интервьюеру, думая: «Вот это, когда предложение рассказывает о зарплате, это будет моя очередь, чтобы быть доминирующим».
Интервьюер тоже в это время показал завороженную улыбку: «Молодой человек умеет делать ракеты, но наша компания маленькая и набирает только винты. Вам следует найти другую работу».
Я был потрясен, время как будто остановилось, и за тишиной последовала ужасная тишина.
Единственное, что я хочу сказать после этого, это то, что сила, которую тренирует тренажерный зал, действительно хороша.
ps: Эта статья чисто выдумка.Я надеюсь, что интервьюеры и соискатели смогут жить в гармонии и создавать лучшее общество.
Если вы счастливы, я надеюсь, вам понравится. благодарный.