论坛 › SqlServer › 【css3】png图片实现动态动画

小秦哥 发表于 2024-6-27 06:53:58

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

.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;

      }
<div class="border_style">
      <div class="wrj_box"></div>
    </div>
https://img-blog.csdnimg.cn/direct/f786c3d425744979a91c4c62b15ad854.gif

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

查看完整版本: 【css3】png图片实现动态动画