Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use pure CSS code to achieve the animation effect of text disconnection. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Code interpretation

To define dom, there is only one element, and the element has a data-text attribute whose value is equal to the text within the element:

BREAK

Centered display:

Html,body {

Height:100%

Display:flex

Align-items:center

Justify-content:center

}

Set the gradient background color:

Body {

Background:linear-gradient (brown,sandybrown)

}

Set the font size of the text:

.text {

Font-size:5em

Font-family: "arialblack"

}

Use pseudo elements to add text:

.text {

Position:relative

}

.text:: before

.text:: after {

Content:attr (data-text)

Position:absolute

Top:0

Left:0

Color:lightyellow

}

Set the mask for the text on the left:

.text:: before {

Background-color:darkgreen

Clip-path:polygon (0010% 0300% 0100%)

}

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

.text:: after {

Background-color:darkblue

Clip-path:polygon (60% 0100% 051 1000% 300%)

}

When the mouse is crossed, the masked text is offset to both sides:

.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 the original text and pseudo elements:

.text {

Color:transparent

}

.text:: before {

/ * background-color:darkgreen;*/

}

.text:: after {

/ * background-color:darkblue;*/

}

The text on both sides increases the skew effect:

.text: hover::before {

Transform:rotate (- 5deg)

}

.text: hover::after {

Transform:rotate (5deg)

}

Fine-tune the height of the text:

.text: hover::before {

Top:-0.05em

}

.text: hover::after {

Top:0.05em

}

On "how to use pure CSS code to achieve text disconnection animation effect" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.