background-position与渐变hover过渡效果实例页面

回到相关文章 »

效果：

代码：

CSS代码：

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

HTML代码：

<div class="box"></div>