我可以将HTML + CSS动画转换为.gif扩展名吗？

问题描述 投票：2回答：1

我的网络中有一个示例加载程序，但是该加载程序是用HTML + CSS动画制作的，我想将Web加载程序转换为gif，因此可以将其用于我的移动应用程序。

这里是链接：https://jsfiddle.net/6uedrb89/

这里是演示：

.se-pre-con {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: transparent;
    }
    .se-pre-con > img {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -25px 0 0 -25px;
    }

    .se-pre-con #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }

    .se-pre-con #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 120px;
        height: 120px;
        margin: -60px 0 0 -60px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #3b57e0;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

    .se-pre-con #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #8B0000;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    .se-pre-con #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #3b650a;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }

    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
<html>
    <head>
    </head>
    <body>
        <div class="se-pre-con">
                <img src="https://www.google.co.id/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" width="51">
                <div id="loader-wrapper">
                    <div id="loader">
                    </div>
                </div>
            </div>
    </body>
    </html>

我尝试使用Html52gifConverter

但是我无法获得干净的循环。

有人可以帮我吗？

html css gif loader
1个回答
0
投票

我有同样的问题，我只知道需要使用视频放映（一些用于视频的程序），然后像这样使用https://giphy.com/create/gifmaker如果可以的话，我在这里告诉您代码和链接

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.