How to use pure CSS to achieve text disconnection animation effect (source code attached)

The content of this article is about how to use pure CSS to achieve the animation effect of text disconnection (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Effect preview

Source code download

https://github.com/comehope/front- end-daily-challenges/tree/master/012-broken-text-effects

Code Interpretation

Define dom, there is only one element, the element has a data-text attribute, the attribute value is equal to the element Text inside:

<div class="text" data-text="BREAK">BREAK</div>

Centered display:

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Set gradient background color:

body {
    background: linear-gradient(brown, sandybrown);
}

Set font size of text:

.text {
    font-size: 5em;
    font-family: "arial black";
}

Use pseudo elements to increase Text:

.text {
    position: relative;
}

.text::before,
.text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: lightyellow;
}

Set the mask of the text on the left:

.text::before {
    background-color: darkgreen;
    clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
}

Set the background and mask of the text on the right:

.text::after {
    background-color: darkblue;
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
}

When the mouse moves over, the masked text Offset to both sides respectively:

.text::before,
.text::after {
    transition: 0.2s;
}

.text:hover::before {
    left: -0.15em;
}

.text:hover::after {
    left: 0.15em;
}

Hide auxiliary elements, including the background color of original text and pseudo elements:

.text {
    color: transparent;
}

.text::before {
    /*background-color: darkgreen;*/
}

.text::after {
    /*background-color: darkblue;*/
}

Add skew effect to text on both sides:

.text:hover::before {
    transform: rotate(-5deg);
}

.text:hover::after {
    transform: rotate(5deg);
}

Fine-tuning Text height:

.text:hover::before {
    top: -0.05em;
}

.text:hover::after {
    top: 0.05em;
}

Done!

Related recommendations:

How to use CSS to achieve the effect of gradient animated borders (with code)

How to use CSS and color mixing mode Implement loader animation effect (with code)

The above is the detailed content of How to use pure CSS to achieve text disconnection animation effect (source code attached). For more information, please follow other related articles on the PHP Chinese website!