Pure js and css realize gradient color including static gradient and dynamic gradient_javascript skills

When you think of "gradient color", what do you think of?

When I started searching for this term, I discovered that it actually has two understandings or two forms: dynamic gradient and static gradient.

The so-called dynamic gradient is a simple example: when he comes, her face gradually turns red... Gradually, what changes gradually is constantly changing; and static gradient is simpler. ：A rainbow appears in the sky, red, orange, yellow, green, blue, purple... In the finished product currently displayed, the color is different from one part to another. The amplitude may be relatively small, and it changes gradually, but there is one thing is crucial, it already exists, forms the status quo of change and cannot be changed.

In this way, we first use javascript to implement the so-called dynamic gradient. Considering the dynamic reasons, I will not show the picture. Let me briefly introduce the idea:

* Dynamic gradient

Copy code The code is as follows:

...

For the convenience of viewing, I wrote the inline style , it is still recommended to use the external link style. Next, simply write and dynamically achieve the gradient effect:

Copy the code The code is as follows:

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills