Question

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

这是演示：

.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扩展名吗？

0 个答案: