我正在尝试制作 css3 微调器(加载器)。没有它工作正常。 但是当我使用 时，CSS 代码没有加载。
查看演示- 没有文档类型 --> http://echakri.net/css-animation/witouthdoctype.html (工作正常)
带文档类型--> http://echakri.net/css-animation/withdotype.html (不工作)
我的代码:
HTML:
<div id="loaderw" class="loaderw">
<div class="loader1"></div>
<div class="loader2"></div>
<div class="loader3"></div>
<div class="loader4"></div>
<div class="loader5"></div>
</div>
CSS:
.Loaderw {
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
float: right;
}
.Loaderw > div {
background-color: green;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.Loaderw .loader2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.Loaderw .loader3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.Loaderw .loader4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.Loaderw .loader5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}<div id="loaderw" class="loaderw">
<div class="loader1"></div>
<div class="loader2"></div>
<div class="loader3"></div>
<div class="loader4"></div>
<div class="loader5"></div>
</div>我如何解决这个问题？
提前致谢。
最佳答案
站点之间的 HTML 和 CSS 是不同的。在带有文档类型的页面中，将 #loaderw 类从小写更改为大写以匹配您的 CSS。
<div id="loaderw" class="loaderw">
到
<div id="loaderw" class="Loaderw">
或者，您可以将 CSS 中的所有 .Loaderw 类更改为 .loaderw - 更简单的方法。但是 CSS 是区分大小写的，所以它们需要以某种方式匹配。
关于html - <!DOCTYPE html> block 动画 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42210312/