2024年最全【css炫酷动画】让面试官眼前一亮的故障风格文字动画(2)，前端实习面试经验汇总

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问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学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。