问

通过向上滑动动画转换背景颜色

良心無悔1314_878 发布于 2023-02-08 13:41

我试图通过使用CSS转换来改变悬停元素的背景颜色.我想通过从底部向上滚动来做到这一点.我可以淡化使用它的背景,但我希望它向上滑动:

-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;  
transition: background-color 0.5s linear;

另外一个想法是,在应用背景的情况下向上滚动一个单独的元素会更好吗？

1 个回答

为了将背景颜色向上滑动,您需要使用背景图像或某种渐变,同时逐渐调整background-position:

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

你可以在这里看到这个演示:http://jsfiddle.net/as5ZU/

2023-02-08 13:42 回答

残破的前进

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签