前端组件化面试题，【缅怀钱老，web前端开发职业培训

z-index: -1;

}

:after 伪类的 css 样式原理与 :before 相同，设置 z-index: -1 ，保证重叠的部分显示为 :before

rockets-windows

绘制 windows 后效果如下:

可以看出主要有两种不同样式：圆形窗口和国旗部分。(国旗部分是阿包添加的，热烈庆贺前几天我国航天取得的伟大新成就)

圆形窗口

.rockets-windows span {

background-color: #ace7ef;

box-shadow: inset -4px 4px 0px 0px rgba(0, 0, 0, 0.3),

inset 0px 0px 0px 2px white;

border: 4px solid #f95959;

z-index: 2;

position: absolute;

border-radius: 100%;

overflow: hidden;

}

外层的红框通过 border 实现，内部立体效果通过 inset 实现立体效果。

红旗

.hongqi {

width: 30px;

height: 20px;

background-image: url(./hongqi2.jpeg);

position: absolute;

background-size: cover;

bottom: 92px;

z-index: 1;

box-shadow: 0px 0px 0px 1px #e4e4e4;

}

rocket-bottom

先看一下添加 rocket-bottom 后的效果

两翼部分的实现代码类似于 body 部分的底部，都是借助 transform 的 rotateX 和 perspective 实现的。

这里不做多余赘述。

/* 两翼部分 */

.rockets-bottom span:nth-child(2) {

background-color: #4ba3b7;

border-radius: 10px;

position: absolute;

overflow: hidden;

width: 50px;

height: 130px;

left: 32%;

bottom: 6%;

transform: perspective(10em) rotateX(

60deg

) translateZ(-1px);

box-shadow: inset -5px -3px 0px 0px rgba(0, 0, 0, 0.2)

}

/* 两翼红线装饰 */

.rockets-bottom span:before {

content: “”;

position: absolute;

background-color: white;

width: 2px;

height: 120%;

border-radius: 20px;

}

.rockets-bottom span:nth-child(2):before {

left: 0px;

border-right: 2px solid #f95959;

}

fire部分

fire 部分架构( fire 部分效果可以看前言中动图):

span 标签实现了火焰，每个标签配合 :after 实现两根火焰。

css 部分实现:

.fire.burn span {

border-radius: 50px;

top: 0;

position: absolute;

background-color: #ffd460;

height: inherit;

/* 火焰动画效果 */

animation: fire 0.8s ease infinite alternate;

}

.fire.burn span:nth-child(1) {

width: 6px;

height: 40px;

left: 44%;

transform: translateY(27px);

/* 设置火焰 */

box-shadow: inset 0px -7px 10px #ea5455, inset 0px -19px 10px #ffc175,

0px -7px 10px #ea5455;

animation-delay: 0.2s;

}

.fire.burn span:nth-child(1):after {

position: absolute;

content: “”;

width: 4px;

height: 60%;

border-radius: 50px;

background-color: #ffd460;

bottom: 0;

transform: translate(8px, 15px);

/* 第二根火焰 */

box-shadow: inset 0px -5px 10px #ea5455, inset 0px -19px 10px #ffc175,

0px -7px 10px #ea5455;

}

火箭发射JS部分

---

绘制火箭完毕后，就可以进行火箭点火、发射的行为。火箭发射的行为并没有借助 animate.js 等运动框架，主要使用 CSS3 提供的 animation 动画配合类名切换实现。

例如下面我们可以看一下火箭发射效果。

火箭发射效果实现

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

sx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

[外链图片转存中…(img-DdOzaSPe-1712482219061)]

[外链图片转存中…(img-ZbOp0htQ-1712482219061)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-jBJXXGtc-1712482219062)]