可以将HTML+CSS动画(PNG扩展名图像)转换为.gif扩展名图像吗?
我需要创建加载器GIF,但加载器是用HTML+CSS动画(PNG扩展图像)制作的,我想将Web加载器转换为GIF图像,任何可用于将HTML转换为GIF的工具。
这里是链接:https://jsfiddle.net/6uedrb89/6/
这是演示:
任何人请帮助我解决此问题
提前谢谢
<div class="tc-play-animated-loading">
<img src="https://s27138.pcdn.co/wp-content/uploads/2018/09/favIcon.png" alt="play" class="tc-play-animated">
</div>
<style>
div.tc-play-animated-loading {
position: absolute;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
left: 50%;
top: 50%;
transform: translate(-50%,-50% );
}
img.tc-play-animated {
-webkit-animation: play-filter-animation 8s linear infinite;
-moz-animation: play-filter-animation 8s linear infinite;
-o-animation: play-filter-animation 8s linear infinite;
-ms-animation: play-filter-animation 8s linear infinite;
animation: play-filter-animation 8s linear infinite;
}
@-webkit-keyframes play-filter-animation{
from{
-webkit-filter:hue-rotate(-360deg)
}
to{
-webkit-filter:hue-rotate(360deg)
}
}
@-o-keyframes play-filter-animation{
from{
-o-filter:hue-rotate(-360deg)
}
to{
-o-filter:hue-rotate(360deg)
}
}
@-moz-keyframes play-filter-animation{
from{
-moz-filter:hue-rotate(-360deg)
}
to{
-moz-filter:hue-rotate(360deg)
}
}
@-ms-keyframes play-filter-animation{
from{
-ms-filter:hue-rotate(-360deg)
}
to{
-ms-filter:hue-rotate(360deg)
}
}
@keyframes play-filter-animation{
0%{
filter:hue-rotate(-360deg)
}
50%{
filter:hue-rotate(360deg)
}
100%{
filter:hue-rotate(0)
}
}
</style>
解决方案
将filter:hue
更改为transform
@-webkit-keyframes play-filter-animation{
0%{-webkit-transform: rotate(0deg)}
100%{-webkit-transform: rotate(360deg)}
}
@keyframes play-filter-animation{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
https://jsfiddle.net/lalji1051/u7fw4jd5/6/
相关文章