<！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

回答

相關問題