Teach you how to use css3 to add gradient effects to images (detailed code explanation)

In the previous article "Teach you step by step how to use CSS3 to achieve animation effects (code sharing)", I will introduce to you how to use CSS3 animation effect setting experience. The following article will introduce to you how to use css3 to add gradient effects to images. Let’s take a look.

The first time I came into contact with css3 gradient was a long time ago. I thought this thing was very interesting. It is like playing PS and you can make many gorgeous things.

Browser support

linear-gradient linear-gradient

Use syntax

linear-gradient([ [ [| to [top | bottom] || [left | right] ],]?[,]+);

The following codes can be run, and the execution results are the same

linear-gradient(#fff, #333); linear-gradient(to bottom, #fff, #333); linear-gradient(to top, #333, #fff); linear-gradient(180deg, #fff, #333); linear-gradient(to bottom, #fff 0%, #333 100%);

You can define the angle, starting direction, color, and color proportion

demo

Use syntax

radial-gradient( [ circle ||][ at]? , | [ ellipse || [|]{2}][ at]? , | [ [ circle | ellipse ] ||][ at]? , | at,[ ,]+ )

radial-gradient(circle, #f00, #ff0, #080); radial-gradient(circle at center, #f00, #ff0, #080); radial-gradient(circle at 50%, #f00, #ff0, #080); radial-gradient(circle farthest-corner, #f00, #ff0, #080);

You can quickly locate the position of the shape throughlengthclosest-side The edge shape of the gradient and the container are closest to the gradient center point is tangent to one side (circle) or at least to the vertical and horizontal sides closest to the center point of the gradient (ellipse).

You can useatto quickly determine the position of the center of the circlecircle at left topThe center of the circle is in the upper left corner

• circle at right top circle center at the upper right corner

• circle at left bottom circle center at the lower left corner

• circle at right bottom The center of the circle is in the lower right corner

##circle at center | at 50% The center of the circle is in the middle
Code example

Get the following

Filled radial gradient repeating-radial-gradient

This is similar to repeating-linear-gradient, which is to fill in the gradient.

Code example

Get the following

You can use gradients to create many effects

Code example

As shown below, you can make a beautiful bubble

and then use the animation from the previous article to make it move.

Click here to see the effect https://k-ui.cn The animation is delayed and will take a while to appear.

Recommended learning:

The above is the detailed content of Teach you how to use css3 to add gradient effects to images (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!