<！DOCTYPE html> block animation css

我想让css3微调（加载程序）。它没有工作正常。但是，当我使用，CSS代码不加载。<！DOCTYPE html> block animation css

见人口统计学没有DOCTYPE - >http://echakri.net/css-animation/witouthdoctype.html（做工精细）

与DOCTYPE - >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"> 
 
\t \t \t \t <div class="loader1"></div> 
 
\t \t \t \t <div class="loader2"></div> 
 
\t \t \t \t <div class="loader3"></div> 
 
\t \t \t \t <div class="loader4"></div> 
 
\t \t \t \t <div class="loader5"></div> 
 
\t \t \t </div>

我怎么解决这个问题？

在此先感谢。

来源

2017-02-13 Al Amin

请在此处添加有意义的代码和问题描述。请不要链接到需要修复的网站 - 否则，一旦问题得到解决，或者您链接到的网站无法访问，此问题将对未来的访问者失去任何价值。发布 [最小，完整和可验证示例（MCVE）]（http://stackoverflow.com/help/mcve）显示您的问题将帮助您获得更好的答案。欲了解更多信息，请参阅 [我网站上的某些内容不起作用。我可以只粘贴一个链接吗？]（http://meta.stackexchange.com/questions/125997/）谢谢！ – j08691

请发布任何有用的代码来清除问题。 –

它与你的'<！DOCTYPE html>'没有任何关系，你在css目标中输入了错误的类名，而在你的CSS代码中写入了不同的css类名..所以这些完全相同，你的加载器将开始工作。！：D：P –

网站之间的HTML和CSS是不同的。在带有文档类型的页面中，将#loaderw类从小写更改为大写以匹配CSS。

<div id="loaderw" class="loaderw">

到

<div id="loaderw" class="Loaderw">

或者，你可以在你的CSS改变所有.Loaderw类来.loaderw - 无论是更容易。但CSS是区分大小写的，所以需要以某种方式匹配。

来源

2017-02-13 17:53:36

至于为什么省略DOCTYPE时行为有所不同，请参阅我的答案中的第一个脚注[此处]（http://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-区分大小写/ 12533957＃12533957）。 – BoltClock

很棒，@BoltClock！ – Connum

<！DOCTYPE html> block animation css

回答

相关问题