创建一个只有元素的部分区域，可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

<h1data-text="TextCrack">

<span>TextCrack</span>

</h1>

使用元素的伪元素复制两份文本，再使用clip-path将元素本身、元素的两个伪元素分为3部分，分别对这3部分进行控制

body,html

{

display:flex;

height:100%;

width:100%;

background-color:#000;

overflow:hidden;

font-family:sans-serif;

}

h1{

position:relative;

margin:auto;

font-size:calc(20px+5vw);

font-weight:bold;

color:#fff;

letter-spacing:0.02em;

text-transform:uppercase;

text-shadow:0010pxblue;

user-select:none;

white-space:nowrap;

filter:blur(0.007em);

animation:shake2.5slinearforwards;

}

h1span{

position:absolute;

top:0;

left:0;

transform:translate(-50%,-50%);

clip-path:polygon(10%0%,44%0%,70%100%,55%100%);

}

h1::before,

h1::after{

content:attr(data-text);

position:absolute;

top:0;

left:0;

}

h1::before{

animation:crack12.5slinearforwards;

clip-path:polygon(0%0%,10%0%,55%100%,0%100%);

}

h1::after{

animation:crack22.5slinearforwards;

clip-path:polygon(44%0%,100%0%,100%100%,70%100%);

}

@keyframesshake{

5%,

15%,

25%,

35%,

55%,

65%,

75%,

95%{

filter:blur(0.018em);

transform:translateY(0.018em)rotate(0deg);

}

10%,

30%,

40%,

50%,

70%,

80%,

90%{

filter:blur(0.01em);

transform:translateY(-0.018em)rotate(0deg);

}

20%,

60%{

filter:blur(0.03em);

transform:translate(-0.018em,0.018em)rotate(0deg);

}

45%,

85%{

filter:blur(0.03em);

transform:translate(0.018em,-0.018em)rotate(0deg);

}

100%{

filter:blur(0.007em);

transform:translate(0)rotate(-0.5deg);

}

}

@keyframescrack1{

0%,

95%{

transform:translate(-50%,-50%);

}

100%{

transform:translate(-51%,-48%);

}

}

@keyframescrack2{

0%,

95%{

transform:translate(-50%,-50%);

}

100%{

transform:translate(-49%,-53%);

}