我有一个PNG图片,当时我正在考虑将其用作页面加载器。由于它不是gif,因此没有动画,并且基本上只是静态png图像。我想知道是否有可能将该图像实际转换为Javascript(也许是画布?)并对其进行动画处理?
答案 0 :(得分:1)
CSS animate
属性和@keyframes
规则可以用于实现此目标。例如...
body {
background:#fff;
}
@keyframes arrow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#loadingIMG {
position: fixed;
top:0; right:0; bottom:0; left:0;
margin: auto;
width: 60px;
height: 60px;
transform-origin: center center;
animation: arrow 1s ease-out infinite;
z-index: 1000;
}
<img id="loadingIMG" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAACXBIWXMAAAQKAAAECgFCV1GHAAAEOUlEQVRo3sWZXWhcRRTHf3c32Xy0u5svWhrSuC0FUyKlpASTUvogKIKCPipYMOJTP2xrjemT2laltA1UheJD/XgQfbCgFCtosGhQRNPvVmLS0KQg9aHJZjfZbLJJdscH3bDbnTv3zuzd9czb3HPn/58z58ycOWOhIz5CROhkMxvZQCOrqMUiyRz3mWCcW1zmLnEy7oe0XOuF2MLjdNNGIzU2WvNEGeEXBrhJHKE1OSV4K3v4nikyCBctQ5Qf2M16xfQCdPE0G50NYBGhl6ssuoLObSmu0UerdNQ6jvE3Ca7wrBo+xItcZkkbPNuWGKKHcAH8aVL/aQyp5r6Nc8wZg2dbki/Zmgf/3gq8IGUHX80LjBQNnm3D7KIagHrez4EXdo5axzvEPYMXCGK8SZA6PngAXkpgDR+y4Cm8QDDPR5wtgJcQWMtnLHsO/294pgt7KwqMf4Tn8DsEp2CGWeJMMomgngbqCRNy+M+SRX0+gSp66VEOkybKDQb5mXGSpFhEECBAFREepZsOWqjEWHYRU5rwNm/RSdh2/6phE4e4rrVz5Mg2ZeD9RT/t+BwnYRHhdYb1CYQ4Z6uU5lu6NExrsZXzLu2wIj0kbVSSnGGd9nKu4YRyQR8gEOGSjUKUPoJGHtXMRfcEem1iP0mfoVeHOcW8WwKtXLFZ+zOsNoTvd7mbArDHxmEu0FxieAEQ4jubwOsuObwA2MmU9FM/FQbwQU5pHWXAUemHUR4xgLc44Mr1cgjUMyDpznDEdcacK0224WzTfDxEm2SgSS5gklZnWNTSv+ejk0bJhxuMGMDDNJ+TcK09y9kKNkuvGYPEjQgIPmGK7QWZsEySDHIevpasTIzHjOCz4ifgovkBKtggNc14UQTSpN2q+qQeECdZFAEN8bFK0jtpf2HwnkCtlIBeMBVF4H8Wn3S1mwiUj8CclEBV+QhMSXrDUs8oEQFZxAelu0OJCNyRWmBH+QgMMy/p3+lqN/eEwJDUC7bwcLkI3OVPSX8TTxklJAYEpvlV0m/xPO3lIOAH0jwjyQkaWeCiTs3TXLxOy7UtkCLME5JTIcQ6fmS2SIQgT9LMPXWG4P3VLCu1HCfBffY7nS7eX04BKnmVBALBNK+oKZTiel7DQaIr4zhS8LpA0cAxZvLGmWafyppelmh8dPCVpCgZZa9qFK+KVOs5zJjtgr6k2mGLLdNV085hLinLUwP5x1z+UFW8wWtKVyksVGbwU8lqWulgB120KAudS7zL2yzbEYA6jvOyVql2iVrCtNBA0LGekOFj+oiqlUpZrP6CtY4+RKnK9Yt86r7i5P2DRYKTNLiFB6+fbCbYJ70CKsWrR6sU39BtegMr9tkuzR8cpMkMPGsH04fLZcY4yiYvMkvdp1vBDD9xiDbH/QSvH68XiDHMbwzyO1FcVdn0DCR7vocEc8SYYIxRrjFKTCeV/Qdc80zmGS9ZAwAAAABJRU5ErkJggg==">
可以通过向图像添加特定的CSS class
来隐藏图像或将其从视图中移除...
/* CSS */
#loadingIMG.off {
position:absolute;
top: -9999px;
left: -9999px;
margin: 0;
z-index: -9999;
}
/* JavaScript */
document.getElementById("loadingIMG").classList.add("off");
...,或者可以按照常规方式使用JavaScript将其从浏览器中删除。...
var LIMG = document.getElementById("loadingIMG");
LIMG.parentElement.removeChild(LIMG);
希望有帮助:)