How to use pure CSS code to realize the animation effect of text disconnection
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.
