Let's talk about some interesting CSS questions (13)-cleverly create a gradient animation of the background color !, Css gradient

Let's talk about some interesting CSS questions (13)-cleverly create a gradient animation of the background color !, Css gradient

Start this series and talk about some interestingCSSQuestions and question types are not empty. What to think of is not only to broaden the problem-solving ideas, but also to involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

Some interesting CSS questions (5) -- center a single row, center two rows to the left, and omit more than two rows

Some interesting CSS questions (6)-fully compatible multi-column uniform layout

Some interesting CSS questions (7) -- The Disappearing line

Some interesting CSS questions (8) -- The Tab switching solution for the pure CSS navigation bar

Some interesting CSS questions (9) -- cleverly implementing CSS diagonal lines

Some interesting CSS questions (10) -- structural pseudo-class selector

Some interesting CSS questions (11) -- reset.css

Some interesting CSS questions (12) -- In-depth discussion of CSS Feature Detection @ supports and Modernizr

All questions are summarized in my Github.

 

The text starts from here. Sometimes, um, it should be said that in some specific occasions, we may need the following animated effects: Gradient + animation:

Assume that the gradient is written as follows:

div {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);}

WorkanimationFirst, we will consideranimationIn the step of changing the color to achieve color gradient animation, then our CSS code may be:

div {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);    animation: gradientChange 2s infinite;}@keyframes gradientChange  {    100% {        background: linear-gradient(90deg,  #e91e1e 0%, #6f27b0 100%);    }}

We use three colors:

• #ffc700Yellow
• #e91e1eRed
• #6f27b0Purple

Finally, we did not expect the result, but it was like this:

Our expected transition animation is a frame-by-frame animation.

That is to say, linear gradient does not support animation.animationFrom one color to another? As shown below:

div {    background: #ffc700;    animation: gradientChange 3s infinite alternate;}@keyframes gradientChange  {    100% {        background: #e91e1e;    }}

It is found that a gradient can occur for a single monochrome value:

So

To sum up, linear gradient (radial gradient) is not supportedanimationThe monochrome background is supported.

Find the following documentbackgroundThe following regions are available:

Which CSS attributes can be animated ?, The above is incomplete attributes that support CSS animation. The complete attributes can be left-side.

ForbackgroundRelated: support is written in the document.backgroundNot Supportedbackground: linear-gradient()/radial-gradient(). The reason for speculation may be that the change of adding animation to the gradient consumes too much performance.

So is it impossible to implement the gradient animation of the background color? Next, let's think differently to see if there are other ways to achieve our goal.

 

Use background-position to simulate a gradient Animation

AboveWhich CSS attributes can be animated?AndbackgroundRelatedbackground-position, That isbackground-positionIt supports animation.background-positionTo achieve gradient Animation:

div {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);    background-size: 200% 100%;    background-position: 0 0;    animation: bgposition 2s infinite linear alternate;}@keyframes bgposition {    0% {        background-position: 0 0;    }    100% {        background-position: 100% 0;    }}

We have also cooperatedbackground-size. First, let's get to know:

background-position: Specifies the initial position of the image. The initial position is relativebackground-originSpecifies the background position layer.

background-size: Set the background image size. When the value is a percentage, it indicates the percentage of the specified background image relative to the background area. When two parameters are set, the first value specifies the image width and the second value specifies the Image Height.

Passbackground-size: 200% 100%Set the image width to twice the width of the background area, and then changebackground-positionBecause the size of the background image is twice the size of the background areabackground-positionThe movement0 0->100% 0. The final result is as follows:

Use background-size to simulate a gradient Animation

Sincebackground-positionYes, then the otherbackground-sizeOf course, this is also not a problem. It is similar to the above method, but this timebackground-positionAuxiliarybackground-sizeThe CSS code is as follows:

div {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);    background-position: 100% 0;    animation: bgSize 5s infinite ease-in-out alternate;}@keyframes bgSize {    0% {        background-size: 300% 100%;    }    100% {        background-size: 100% 100%;    }}

The effect is as follows:

Changebackground-sizeIn the first value of the image, I changed the size of the background image from 3 times the size of the background area to 1 times the size of the background area. In the background image conversion process, I achieved an animation effect.

And why?background-position: 100% 0. Because if you do not setbackground-position, The default value is0% 0%, Will cause AnimationThe leftmost color remains unchanged, As shown below, it is not natural:

Simulate gradient animation using transform

Although both of the above methods can be implemented, they do not feel free or random.

Not only that, because the above two methods are usedbackground-positionAndbackground-sizeAnd changing the two attributes in the gradient, resulting in a lot of repainting on the page, which consumes a lot of page performance, so we can try again.transfromMethod:

Use pseudo-element combinationtransformPerform a gradient animation by using the pseudo elements of the elementbeforeOrafter, Draw a big background inside the element, and then usetransformTransform pseudo elements:

div {    background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);    background-position: 100% 0;    animation: bgSize 5s infinite ease-in-out alternate;}@keyframes bgSize {    0% {        background-size: 300% 100%;    }    100% {        background-size: 100% 100%;    }}

Shows the implementation principle:

We cananimationAdd again during Animationscale,skew,roateTo make the effect more realistic and random. The effect is as follows:

The above is just a part of the method. Theoretically, the above effect can be achieved by the combination of pseudo elements to generate displacement or deformation attributes. We can even use different slow functions or draw on the Chan principle to produce random effects.

Of course, all the methods listed in this article are pure CSS methods. They can also be made using SVG or Canvas, and the performance is better. Interested readers can study it on their own.

 

Use the background color gradient Animation

Where can the background color gradient animation be used? Here is an example.

Gradient transition of the background color to realize the light and shade changes of buttons

The effect is as follows:

In addition, the text is highlighted on the background board, so that some static basemap can be used to attract attention and other places.

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.