CSS for background gradient picture transtion transition effect

This article mainly and you introduced the CSS background gradient picture transtion transition effect of the relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

First, Background-image does not support CSS3 transition

Background-image does not support CSS3 transition, and the following CSS settings do not have a transition effect when the CSS3 gradient gradient is present as a background image.

. gradient {  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 change of the gradient is very abrupt, a little transition effect is not.

The following question, if we want to achieve gradient hover when there is transition effect, how to achieve it? Here are a few of the options I've listed here.

Second, using background-position to achieve gradual transition

Background-image Although not support CSS3 transition transition, but background-position support Ah, so, by controlling the background position, we can achieve the gradient transition effect.

The implementation effect is as follows (mouse hover):

The relevant code is as follows:

<p class= "box" ></p>

. 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% 0;    }

Third, with the help of background-color to achieve gradient transition

Background-image Although not support CSS3 transition transition, but background-color support Ah, so, by controlling the background color, and a color rendering technique, we can also achieve the gradient transition effect.

Mouse hover before and after the effect comparison:

The relevant code is as follows:

<p class= "box" ></p>

. box {    max-width:400px;    height:200px;    Background:olive Linear-gradient (to right, Rgba (0,255,0,0), Rgba (0,255,0,.5));    Transition:background-color. 5s;    }. box:hover {    background-color:purple;    }

Iv. implementing a gradient transition with pseudo-elements and opacity

Create a transformed gradient effect with pseudo-elements to achieve a gradient transition effect by changing the opacity transparency of the covered gradient.

The effect after hover:

The relevant code is as follows:

<p class= "box" ></p>

. 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;    }