This is the 26th day of my participation in the August More Text Challenge

Creation is not easy, click a “like” and then watch!

Follow the column to get you into the depths of the CSS world

preface

Click on the APP to read the article, and when loading the article, the word “digging gold” will appear with the effect of gradient effect. That’s roughly what the picture below looks like.

We have learned a lot about CSS properties, you can guess which properties are used. That’s right:

background-image

background-clip

text-fill-color

Let’s start to implement this effect step by step.

Create a div container

This container uses text-aligin and line-height to center a single line of text vertically.

div { width: 375px; height: 500px; text-align: center; line-height: 500px; border: 1px solid #000; font-size:30px; } <div> Dig gold </div>Copy the code

Gradient as background

This one is set at a 45 degree Angle, and the gradient is from white to black. .

background-image: linear-gradient(45deg, #fff, #000);
Copy the code

The effect is shown below:

Cut the back according to the text

The effect is as shown below: as if back to the origin, don’t worry!!

-webkit-background-clip: text;
Copy the code

Sets the font fill color

-webkit-text-fill-color: transparent; 
Copy the code

The effect is as follows: you can actually see that the color of the font has changed.

To do this step is actually over, but it seems that there is no end!! Where is the original black background of the Nuggets?? In our logic, the container cannot set the background color. Indeed, the background color is already outside, and the easiest way to do this is to set the body.

      body {
  background-color: #181123;
}
Copy the code

The effect is not out:

Finally, add the animation

The effect of the gold digging APP is like this: several paragraphs of shadow across the text at 45 degrees, you can go to the APP to see the details.

The first step is to go back to the state where the gradient is the background, where you debug the animation

First of all, we can find that the word nuggets is more and more bright, so we just move the white up according to a certain interval, how to move the white? This is the time to think! The end point of white is on these two words. As long as we move the black starting point according to the interval network, the white will naturally move up. That’s fine: I’m going to change the position according to 20% interval, and the effect is still reasonable. You can try other intervals.

@keyframes gradientRun { 0% { background-image: linear-gradient(45deg, #fff, #000 50%); } 20% { background-image: linear-gradient(45deg, #fff , #000 52%); } 40% { background-image: linear-gradient(45deg, #fff , #000 54%); } 60% { background-image: linear-gradient(45deg, #fff , #000 56%); } 80% { background-image: linear-gradient(45deg, #fff , #000 58%); } 100%{ background-image:linear-gradient(45deg, #fff , #000 60%); }}Copy the code

This is the approximate effect I achieved, only a shadow, the animation is not very smooth, you can freely play, improve. Practice is the real deal (mostly solving multiple shadows and fluency issues, which is easy!!) .

conclusion

Learning basic knowledge is for better use, only practice can better master attributes. If you are still not familiar with these attributes, I recommend reading my previous articles. Of course, pay attention to my column – learn CSS, you can better learn CSS.