欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

一、借助background-position实现渐变过渡

<div class="box"></div>
.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; }

二、借助伪元素和opacity实现渐变过渡

<div class="box"></div>
.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; }

三、借助background-color实现渐变过渡

<div class="box"></div>
.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; }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/jiqiao/j50231.shtml