最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言,第一问100%都可以回答正确,第二问大概只有50%正确率,第三问能回答正确的就不多了,第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法,都是一些可能会遇到的场景,而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了,希望大家通过此文了解js一些特性。
并祝愿大家在新的一年找工作面试中胆大心细,发挥出最好的水平,找到一份理想的工作。
80% {
clip-path: inset(.23em 0 .48em 0);
}
85% {
clip-path: inset(.39em 0 .79em 0);
}
90% {
clip-path: inset(.33em 0 .66em 0);
}
95% {
clip-path: inset(1em 0 .3em 0);
}
100% {
clip-path: inset(.62em 0 .29em 0);
}
}
@keyframes animation-after{
0% {
clip-path: inset(0 0 0 0);
}
5% {
clip-path: inset(.4em 0 .8em 0);
}
10% {
clip-path: inset(.8em 0 .4em 0);
}
15% {
clip-path: inset(1em 0 .1em 0);
}
20% {
clip-path: inset(.6em 0 .3em 0);
}
25% {
clip-path: inset(.3em 0 .6em 0);
}
30% {
clip-path: inset(.5em 0 .8em 0);
}
35% {
clip-path: inset(.1em 0 1em 0);
}
40% {
clip-path: inset(.35em 0 .7em 0);
}
45% {
clip-path: inset(.2em 0 .5em 0);
}
50% {
clip-path: inset(.5em 0 .2em 0);
}
55% {
clip-path: inset(.7em 0 .35em 0);
}
60% {
clip-path: inset(.9em 0 .1em 0);
}
65% {
clip-path: inset(.46em 0 .8em 0);
}
70% {
clip-path: inset(.3em 0 .66em 0);
}
75% {
clip-path: inset(.23em 0 .48em 0);
}
80% {
clip-path: inset(.48em 0 .23em 0);
}
85% {
clip-path: inset(.79em 0 .39em 0);
}
90% {
clip-path: inset(.66em 0 .33em 0);
}
95% {
clip-path: inset(.3em 0 1em 0);
}
100% {
clip-path: inset(.29em 0 .62em 0);
}
}
这里我们设置了两个keyframes,分别为 animation-before 、animation-after
想必已经很明显了,前者是准备给我们后面的伪元素 before 使用的 ;后者是给我们后面的伪元素 after 使用的
那么其中用到的 clip-path 是干什么用的呢?这个是css3的一个新属性,叫做蒙版,而其中的 inset() 值表示的是蒙版形状为矩形
我们来看一下它的用法
首先 inset() 接收四个长度参数,分别表示蒙版距离元素标签的上侧 、右侧 、下侧 、左侧的距离,从而决定了蒙版的大小
当我们设置为 inset(0 0 0 0)时,表示蒙版作用区域大小跟元素标签一样大,如下图所示(红色边框表示蒙版的作用区域)
此时我们的文字是可以完全展示出来的,因为蒙版的作用区域就是我们标签元素的大小
然后我们再来看一下,如果我们的设置为 inset(30px 0 0 0) ,则测试表示,蒙版的作用区域距离标签元素的上侧 30px,距离其它的边 0px,如图所示
图中蓝色边框的部分不是蒙版的作用区域,因此我们无法看到该区域的内容,真实情况如下图所示
在了解了蒙版的使用情况了以后,我们就通过 @keyframes 来设置逐帧动画,使蒙版的作用区域在垂直方向一直变化,实现上下抖动的效果,代码就如上所述
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.txt{
display: inline-block;
font-size: 65px;
font-weight: 600;
padding: 0 4px;
color: white;
position: relative;
}
.txt::before{
/* 获取文本 */
content: attr(data-text);
position: absolute;
/* 向左侧移2px */
left: -2px;
width: 100%;
/* 将背景色设为与主背景同样的颜色,用于遮挡我们的标签元素 */
background: black;
/* 给before伪元素的文本添加左侧2px大小的红色文字阴影 */
text-shadow:2px 0 red;
/* 应用蒙版垂直变化动画,并一直循环 */
animation: animation-before 3s infinite linear alternate-reverse;
}
.txt::after{
/* 获取文本 */
最后
其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)
《前端开发四大模块核心知识笔记》
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。