如何解决如何在 HTML / Javascript 中的单个文件中使用 PNG 序列?
我注意到 PNG 序列文件要么是多个文件,要么是包含所有序列的单个文件。我无法弄清楚这两种类型的序列是否具有不同的名称(如果是,这些名称是什么)。此外,我尝试找出如何使用图像序列 j 像这样的单个文件
用于 HTML / javascript 动画。我想我需要一个在 png 文件(剪辑路径)上移动的 div,但我找不到任何示例。也许你知道一些?谢谢!
解决方法
抱歉,我只能水平(或垂直)动画。如果您将图像水平并排堆叠,那就完美了。
.animatedImage {
background-image: url(https://i.stack.imgur.com/kuEev.png);
height: 300px;
width: 500px;
animation: png-animation 1s steps(3) forwards; /* To change speed of animation,change firs number; To include more images,change number in steps() */
animation-iteration-count:infinite; /* Make animation never ends */
}
@keyframes png-animation {
to {
background-position: -1500px 0px;
}
}
<div class="animatedImage"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。