【css3】png图片实现动态动画

css 复制代码
.border_style {
            width: 400px;
            height: 400px;
            background-color: black;
            margin: auto;
        }

        @keyframes sprite-animation {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 0 -2064px;
                /* 假设每个图像的宽度为100px */
            }
        }
        .wrj_box {
            width: 86px;
            height: 86px;
            background-image: url("./wurenji.png");
            animation: sprite-animation 1s steps(24) infinite;
            z-index: 2000;

        }
html 复制代码
<div class="border_style">
        <div class="wrj_box"></div>
    </div>
相关推荐
Myli_ing33 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风36 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript