所以我找到了这个加载动画,它适用于这个网站: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>
答案 0 :(得分:6)
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;
}
}
答案 1 :(得分:0)
从codepen中取出zip文件。您将在下载的代码中找到所有依赖项。