这是一个使用CSS动画实现背景图线性渐变动画逐渐改变透明度的示例:
HTML代码:
CSS代码:
.container {
width: 400px;
height: 400px;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
animation: fade 5s linear infinite;
}
@keyframes fade {
0% { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); }
50% { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
100% { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); }
}
在上面的示例中,我们创建了一个容器,并使用CSS动画 fade
来控制背景图渐变动画,并通过 background-image
属性和 linear-gradient
函数来定义渐变效果。动画的关键帧定义了背景图的透明度从完全不透明到完全透明的过渡。
你可以调整容器的尺寸、动画的持续时间和透明度渐变的方式来适应你的需求。