This is the 22nd day of my participation in the More text Challenge. For details, see more text Challenge
preface
Ah imperceptibly into the night, there is a saying: time is like chest, squeeze on, lying down on the no. Before lying down, hurry to get today’s more text to fix ~
Today I want to share a pure CSS implementation of the text gradually filled with color change effect, this is a very cool effect, as shown in the cover image above, used in the project before, but it only needs a few simple properties to achieve.
Train of thought
To achieve such an effect, we need to split the effect first:
-
This effect can be split into two boxes, a gray text box and a gradient blue text box.
-
The two boxes overlap completely, with the gradient blue text box on top and the gray text box on the bottom.
-
The top box of blue text is gradually displayed, the bottom box of gray text is gradually covered, and the effect is complete.
-
Given that the more DOM elements the messier, the blue text box above is most conveniently implemented with the pseudo-element ::after.
The implementation process
Train of thought, the rest is to convert the train of thought into code, I follow the above train of thought, three five divided by two to achieve the following code:
<style>
h1{
position: relative;
font-size: 72px;
font-weight: 700;
color: #ccc;
}
h1::after{
content: attr(text-data);
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right, #ABDCFF.#0396FF);
-webkit-background-clip: text;
color: transparent;
animation: changeColor 6s linear infinite;
}
@keyframes changeColor{
0%{
width: 0%;
}
100%{
width: 100%; }}</style>
<h1 text-data="Hello, I am the Antarctic Ice.">Hello, I am the Antarctic ice</h1>
Copy the codeLet’s run this: The effect looks like this:
Yi??????? Although the gray text was completely covered in the end, the blue text was squeezed to the bottom of the text when the width was not enough, and then with the increase of the width of the word again jumping up and down the cover, something wrong ~
At this point I thought, this is a small problem, add overflow: hidden; So I changed the code:
<style>
h1{
position: relative;
font-size: 72px;
font-weight: 700;
color: #ccc;
}
h1::after{
content: attr(text-data);
overflow: hidden; /* add this line of code */
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right, #ABDCFF.#0396FF);
-webkit-background-clip: text;
color: transparent;
animation: changeColor 6s linear infinite;
}
@keyframes changeColor{
0%{
width: 0%;
}
100%{
width: 100%; }}</style>
<h1 text-data="Hello, I am the Antarctic Ice.">Hello, I am the Antarctic ice</h1>
Copy the codeRun it again: It looks like this:
Still nothing has changed. Hey!
This is because I’m not limiting the width and height of the pseudo-element, so the text is not outside the content area of the pseudo-element, so overflow: hidden; It looks like it’s not working, but it’s working, but it’s not working.
So what’s the real problem??
The answer is: the problem of text wrapping!
As we all know, there are weird problems when text is newline when it shouldn’t be.
<style>
h1{
position: relative;
font-size: 72px;
font-weight: 700;
color: #ccc;
}
h1::after{
content: attr(text-data);
white-space: nowrap; /* This line of code has been added to disallow word-wrapping */
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right, #ABDCFF.#0396FF);
-webkit-background-clip: text;
color: transparent;
animation: changeColor 6s linear infinite;
}
@keyframes changeColor{
0%{
width: 0%;
}
100%{
width: 100%; }}</style>
<h1 text-data="Hello, I am the Antarctic Ice.">Hello, I am the Antarctic ice</h1>
Copy the codeLet’s run this:
It works perfectly, there is no need to set any width or height for pseudo elements, and no need to set overflow: hidden. , just a simple ban on line breaks, done!
Afterword.
Hope the content shared by the ice today can help you, through the above code can achieve text gradually filled effects, the actual scene application can also be changed to vertical version, in the first screen or loading can be used, or very fun very cool very interesting ~
Today is the twenty-second day that I insist day more, work overtime today, after going home, pack up to have not thought good to write what, likelihood everybody is same, the hardship of worker is much the same ~
A little bit of output every day, a little bit of progress. Where there is a will, there is a way. Come on, everybody
If this post helped you, keep an eye on big ice and give it a like
The list of more challenging articles is as follows:
- Flex layout container elements and project elements attributes
- 2021.06.02 how to play with CSS Gradient Background
- How to Use SVG to create Text Effects along Arbitrary Paths
- 2021.06.04 “Front-end code specification of 3 categories and 15 subcategories, let the team code be standardized!”
- Git Commit Specification for team management: How many people don’t write commit records?
- 2021.06.06 “How to Control CSS mouse Style and Expand mouse Click area | Weekend study”
- 2021.06.07 “Pure CSS implementation: imitation gold mining account password login, the red panda wu eye action switch small Egg”
- On Prototypes and Prototype Chains in 11 Aspects
- A Closer Look at JavaScript scope and Scope Chains
- What is a closure in JavaScript?
- 2021.06.11 pure CSS Implementation: Cool Video Text Mask Effects
- Apply a free API and use native JS to create typewriter-like vertical lines of text
- Pure CSS implementation: Zebra stripes inside multi-line Text boxes
- 2021.06.14 “Native JS implementation touch slide listening event”
- 2021.06.15 “Native JS To achieve mouse wheel triggered page horizontal Scrolling”
- 2021.06.16 “When the native JS realizes jump or refresh the page, the browser prompts that the current page is not saved”
- 2021.06.17 “Three Basic Pop-ups of Native JS”
- Pure CSS implementation: A button fixed at the bottom of the page
- Pure CSS Implementation: Typewriter Animation for single lines of text
- Pure CSS Implementation: How to Make a perfect parallelogram
- 2021.06.21 “Talk about the JS based implementation preventing others from debugging the site through the console”