Question

所以我找到了这个加载动画，它适用于这个网站：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>

Answer 1

CodePen使用-prefix-free，为此添加required前缀属性，以便在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;
    }
}

Answer 2

从codepen中取出zip文件。您将在下载的代码中找到所有依赖项。

enter image description here

CSS Animation在一个站点上工作，但不在个人站点上工作

2 个答案: