Results preview
Press the "click Preview" button to the right of the current page preview, click on the link full-screen preview.
https://codepen.io/zhang-ou/pen/LmjNgL
Interactive video tutorials
This video is interactive, you can pause the code video, editing video.
Please use chrome, safari, edge open view.
Source code download
Please download from github.
https://github.com/comehope/front-end-daily-challenges/tree/master/012-broken-text-effects
Code Reading
Defined dom, only one element, a data-text element has attributes, the attribute value is equal to the text element:
<div class="text" data-text="BREAK">BREAK</div>
Centered:
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 text font size:
.text {
font-size: 5em;
font-family: "arial black";
}
Add text to the use of pseudo-elements:
.text {
position: relative;
}
.text::before,
.text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: lightyellow;
}
Set the left side of the text mask:
.text::before {
background-color: darkgreen;
clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
}
Set the right side of the text and the background mask:
.text::after {
background-color: darkblue;
clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
}
When the mouse across, the mask words are shifted on 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 original text and the background color of pseudo-elements:
.text {
color: transparent;
}
.text::before {
/*background-color: darkgreen;*/
}
.text::after {
/*background-color: darkblue;*/
}
Text on both sides to increase skew results:
.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;
}
We're done!
Knowledge Point
- data-* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
- clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
- shape functions https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape#Syntax
- rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
- ::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before
- ::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after