CSS動畫作品的一個網站，但沒有個人網站

所以我發現了這個加載動畫，它可以在這個網站：http://codepen.io/Sirquini/pen/pAqeF CSS動畫作品的一個網站，但沒有個人網站

但是當我將代碼複製到我的電腦並運行它，我得到的是一個黑色的點在屏幕的頂部中心。爲什麼它在網站上工作，但不是當我將其複製到我的本地機器時？

這正是我：

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

來源

2013-08-01 Get Off My Lawn

什麼瀏覽器？。 – isherwood

Chrome的最新版本。但是這不應該成問題，它只適用於一個地方，而不適用於其他地方。 –

不，不要緊，但你沒有給我們任何工作，所以我正在抓。你正在定位.loader兩次，順便說一句。 – isherwood

CodePen使用-prefix-free，這是增加了這在Chrome工作required前綴屬性。

你需要這個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-01 13:39:23 thirtydot

啊好吧。他們不應該自動添加IMO。 –

它使得在多個瀏覽器中進行原型製作變得更快捷，因爲您不必擔心編寫前綴屬性。但是，我確實認爲，如果你不知道這件事發生，這是非常令人困惑的！ – thirtydot

非常感謝！我決定在我的項目中使用該js腳本，而不是編寫所有的前綴類型。 –

撿起codepen的zip文件。您將在下載的代碼中找到所有依賴關係。

enter image description here

來源

2013-08-01 13:47:15 Abhitalks

這不能解決問題。 – thirtydot

下載的zip在本地工作。所以，他在本地工作的問題就解決了。其次，他可以在下載的文件中發現'prefixfree.min.js'，從而識別出依賴關係。有趣的是，雖然它被命名爲「min」，但它實際上並沒有縮小！無論如何，你已經解釋了細節。 – Abhitalks

是的，我猜。當我寫這個評論時，我看到.zip中的CSS沒有包含前綴屬性，我認爲唯一的解決方案是具有這些前綴屬性。 – thirtydot

CSS動畫作品的一個網站，但沒有個人網站

回答

相關問題