Мне нужно создать Loader GIF, но загрузчик сделан с HTML + CSS-анимацией (изображение расширения png), и я хочу преобразовать веб-загрузчик в изображение 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>