CSS文字斷裂效果，CSS實現文字斷裂效果的示例代碼

clip-path屬性

創建一個只有元素的部分區域，可以顯示的剪切區域。區域內的部分顯示，區域外的隱藏。

<h1 data-text="text crack">
????<span>text crack</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: 0 0 10px blue;
????user-select: none;
????white-space: nowrap;
????filter: blur(0.007em);
????animation: shake 2.5s linear forwards;
}
??
h1 span {
????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: crack1 2.5s linear forwards;
????clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
??
h1::after {
????animation: crack2 2.5s linear forwards;
????clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
??
@keyframes shake {
????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);
????}
}
??
@keyframes crack1 {
????0%,
????95% {
????????transform: translate(-50%, -50%);
????}
??
????100% {
????????transform: translate(-51%, -48%);
????}
}
??
@keyframes crack2 {
????0%,
????95% {
????????transform: translate(-50%, -50%);
????}
??
????100% {
????????transform: translate(-49%, -53%);
????}
}

因為使用了 clip-path 裁剪后的元素，只有元素的剪切區域才能被顯示，所以我們可以分別控制 3 個部分進行動畫

最終效果如下

到此這篇關于css實現文字斷裂效果的示例代碼的文章就介紹到這了