奔跑的少年动画练习

最新推荐文章于 2024-09-14 13:04:57 发布

m0_51396253

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量201

点赞数

文章标签：动画 css html5

本文链接：https://blog.csdn.net/m0_51396253/article/details/120569816

版权

CSS动画负值定位背景图片无限循环关键帧

关键词由CSDN通过智能技术生成

background需要负值定位，移动的是图片

 <title>奔跑的少年</title>
    <style>
.box1{
    width: 126.2px;
    height: 128px;
    margin: 0 auto;
    background-image: url(../项目练习exercise/练习的截图/奔跑的少年.jpg);
    animation: run 1s steps(6) infinite;
}
@keyframes run{
    from{
        background-position: 0 0;
    }
    to{
        background-position: -757px;
    }
}
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>