background-position：使背景图片呈现，动画效果

最新推荐文章于 2024-08-24 22:24:29 发布

原创最新推荐文章于 2024-08-24 22:24:29 发布 · 561 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

CSS 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一种使用CSS实现的背景图片滚动动画效果。通过设置背景图片的位置变化，并结合关键帧动画，使得背景图片能够在固定区域内上下滚动，形成动态视觉效果。

实现的效果：

实现的代码：

<style>
    .bag{
        width: 370px;
        height: 600px;
        background: url('./Group_1486.png') center repeat pink;
        animation: auto 1s linear infinite;
    }
    @keyframes auto{
        0%{
            background-position-y:500px;
        }
        100%{
            background-position-y:-500px;
        }
    }
</style>
<body>
    <div class="bag">5656</div>
</body>