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 回答
0

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

在此处输入图像描述

于 2013-08-01T13:47:15.457 回答