1

だから私はこのローディング アニメーションを見つけた、それはこのサイトで動作します: http://codepen.io/Sirquini/pen/pAqeF

しかし、コードをコンピューターにコピーして実行すると、画面の上部中央に黒い点が表示されるだけです。サイトでは機能するのに、ローカル マシンにコピーすると機能しないのはなぜですか?

ここに私が持っているものがあります：

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {margin: 0; padding: 0;}
            body {  
                background: #eee;
            }
            .loader {
                margin: 50px auto;
                text-align: center;
                position: relative;
                width: 60%;
            }
            .loader span {
                background: #222;
                border-radius: 5px;
                display: inline-block;
                position: relative;
                width: 10px;
                height: 10px;
                position: absolute;
            }
            .loader .dot_1 {
                margin-right: 10px;
                animation: loading 4s ease-in-out infinite;
            }
            .loader .dot_2 {
                animation: loading 4s ease-in-out .3s infinite;
            }
            .loader .dot_3 {
                animation: loading 4s ease-in-out .6s infinite;
            }
            @keyframes loading {
                from {
                margin-left: 50%;
                opacity: 0;
            }
            50% {
                margin-left: 0;
                opacity: 1;
            }
            to {
                margin-left: -50%;
                opacity: 0;
            }
            }
        </style>
    </head>
    <body>
        <div class="loader">
            <span class="dot_1"></span>
            <span class="dot_2"></span>
            <span class="dot_3"></span>
        </div>
    </body>
</html>
4

2 に答える 2

6

CodePen は -prefix -freeを使用します。これは、これが Chrome で機能するために必要なプレフィックス付きプロパティを追加します。

次の CSS が必要です。

.loader .dot_1 {
    margin-right: 10px;
    -webkit-animation: loading 4s ease-in-out infinite;
            animation: loading 4s ease-in-out infinite;
}
.loader .dot_2 {
    -webkit-animation: loading 4s ease-in-out .3s infinite;
            animation: loading 4s ease-in-out .3s infinite;
}
.loader .dot_3 {
    -webkit-animation: loading 4s ease-in-out .6s infinite;
            animation: loading 4s ease-in-out .6s infinite;
}
@-webkit-keyframes loading {
    from {
        margin-left: 50%;
        opacity: 0;
    }
    50% {
        margin-left: 0;
        opacity: 1;
    }
    to {
        margin-left: -50%;
        opacity: 0;
    }
}
@keyframes loading {
    from {
        margin-left: 50%;
        opacity: 0;
    }
    50% {
        margin-left: 0;
        opacity: 1;
    }
    to {
        margin-left: -50%;
        opacity: 0;
    }
}
于 2013-08-01T13:39:23.363 に答える