我想在用户转到页面时进行此动画处理，图像会更改位置，并且还会向图像添加线性渐变，如下所示：
但这就是我所拥有的：
我只想使线性渐变动画平滑...这是我正在使用的代码：
.bg-image {
background-image: linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url("Background.jpg");
background-position: 50% 100%;
animation: backgroundPosition 4s ease-in;
}
@keyframes backgroundPosition {
from {
background-image: linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0)
),
url("Background.jpg");
background-position: 50% 0%;
}
to {
background-image: linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url("Background.jpg");
background-position: 50% 100%;
}
}
不能为颜色或Alpha设置渐变动画，只能为位置设置动画。
在horizontall中将灰色图层设置为更大的尺寸，并使其成为真实的渐变，从透明过渡到所需的任何灰度级别。
然后，还对渐变的水平位置（从透明面到灰色面）进行动画处理
.bg-image {
height: 400px;
width: 400px;
background-image: linear-gradient(to right,
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)
),
url("http://placekitten.com/400/800");
background-position: 0% 50%;
background-repeat: no-repeat;
background-size: 1000% 100%, 100% 200%;
animation: backgroundPosition 4s ease-in infinite;
}
@keyframes backgroundPosition {
from {
background-position: 0% 0%, 0% 50%;
}
to {
background-position: 100% 0%, 0% 100%;
}
}<div class="bg-image"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句