Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "CSS how to achieve background gradient picture transition effect" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "CSS how to achieve background gradient picture transition effect" article can help you solve the problem.

1. Background-image does not support CSS3 transition

Background-image does not support CSS3 transition, and the following CSS settings will not have a transitional effect when the CSS3 gradient gradient exists as a background image.

Gradient:hover {background-image: linear-gradient (to right, olive, green); transition: background-image 0.5s linear;}. Gradient:hover {background-image: linear-gradient (to right, green, purple);}

Mouse hover will find that the gradual change is very abrupt, there is no transition effect.

The following question is, if we want to achieve a gradual hover when there is a transitional effect, how to achieve it? I have listed several possible methods here.

Second, realize the gradual transition with the help of background-position

Although background-image does not support CSS3 transition transition, background-position supports it, so we can achieve the effect of gradual transition by controlling the background position.

You can click here: use background-position to realize gradual transition demo

The results are as follows (mouse hover):

The related code is as follows:

.box {max-width: 400px; height: 200px; background: linear-gradient (to right, olive, green, purple); background-size: 200%; transition: background-position .5s;} .box:hover {background-position: 100%;} 3. Realize gradual transition with the help of background-color

Background-image does not support CSS3 transition transitions, but background-color does, so by controlling the background color and a color rendering technique, we can also achieve gradual transitions.

You can click here: background-color to achieve gradual hover transition effect demo

Comparison of effects before and after mouse hover:

The related code is as follows:

Box {max-width: 400px; height: 200px; background: olive linear-gradient (to right, rgba, rgba); transition: background-color .5s;} .box:hover {background-color: purple;} IV, gradual transition with the help of pseudo elements and opacity

The gradient effect after transformation is created with the help of pseudo elements, and the gradient transition effect is realized by changing the opacity transparency change of the overlay gradient.

You can click here: CSS3 opacity to achieve gradual hover transition effect demo

The following figure shows the effect after hover:

The related code is as follows:

.box {max-width: 400px; height: 200px; background: linear-gradient (to right, olive, green); position: relative; z-index: 0;} .box::before {content:''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient (to right, green, purple); opacity: 0; transition: opacity .5s; z-index:-1 }. Box:hover::before {opacity: 1;} this is the end of the introduction about "how CSS achieves the transition effect of background gradient pictures". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.