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

1. .border_style {
2.             width: 400px;
3.             height: 400px;
4.             background-color: black;
5.             margin: auto;
6.         }
8.         @keyframes sprite-animation {
9.             0% {
10.                 background-position: 0 0;
11.             }
13.             100% {
14.                 background-position: 0 -2064px;
15.                 /* 假设每个图像的宽度为100px */
16.             }
17.         }
18.         .wrj_box {
19.             width: 86px;
20.             height: 86px;
21.             background-image: url("./wurenji.png");
22.             animation: sprite-animation 1s steps(24) infinite;
23.             z-index: 2000;
25.         }

复制代码

1. <div class="border_style">
2.         <div class="wrj_box"></div>
3.     </div>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。