How to realize the effect of changing element color from left to right by css3

This article mainly introduces css3 how to achieve the element color from left to right blue effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

In css, you can use the background attribute and the "linear-gradient ()" function to achieve the effect of turning the element blue from left to right. You only need to add the "background:linear-gradient (to right,white,blue)" style to the element.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can use the background attribute and the linear-gradient () function to change the color from left to right.

The background property is used to style the background of the element, and the linear-gradient () function is used to set the linear gradient of the element and to create a picture that represents a linear gradient of two or more colors.

To create a linear gradient, you need to specify two colors, and you can also achieve a gradient in different directions (specified as an angle). If you do not specify a direction, the default gradient is from top to bottom.

Let's take a look at this through an example:

123 # grad1 {height: 200px; background: linear-gradient (to right, white, blue);} Linear gradient-from left to right

A linear gradient starting from the left. The starting point is white and slowly transition to blue:

Output result:

Thank you for reading this article carefully. I hope the article "how to achieve the effect of element color turning blue from left to right" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!