使用CSS3的人都知道背景background-image是可以线性渐变(linear-gradient)和径向渐变(radial-gradient),但是想要做到过渡动画,单纯的background-image是不够的
(1)/* 借助background-position */
/****** CSS *****/ .position { width: 400px; height: 200px; background: linear-gradient(to right, red, yellow); background-size: 200%; transition: background-position 1s; } .position :hover { /*默认是0,0*/ background-position: 100% 0; } /***** HTML *****/ <div class="position"></div>
(2)/* 借助background-color */
/**** CSS ****/ .color{ width: 400px; height: 200px; background: olive linear-gradient(to right, rgba(0,255,255,0), rgba(0,255,0,.5)); background-size: 200% 0; transition: background-color 1s; } .color:hover { background-color: pink; } /**** HTML ****/ <div class="color"></div>
(3)/* 借助伪元素 */
/**** CSS ****/ .opacity{ width: 400px; height: 200px; background: linear-gradient(to right, red, yellow); position: relative; z-index: 0; } .opacity::before{ content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(to right, yellow, pink); opacity: 0; transition: opacity 1s; z-index: -1; } .opacity:hover::before { opacity: 1; } /**** HTML ****/ <div class="opacity"></div>