欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現(xiàn)橫向粒子變動加載動畫

  發(fā)布時間：2016-04-25 15:39:21   作者：佚名   我要評論
這篇文章主要介紹了CSS實現(xiàn)橫向粒子變動加載動畫的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了CSS實現(xiàn)橫向粒子變動加載動畫的對應代碼，供大家參考，具體內(nèi)容如下

此處用到了CSS3動畫animation屬性的animation-fill-mode屬性和animation-delay屬性。

 ● animation-fill-mode屬性規(guī)定動畫在播放之前或之后，其動畫效果是否可見。
        none：不改變默認行為。
        forwards：當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。
        backwards：在animation-delay所指定的一段時間內(nèi)，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀
中定義）。
       both： 向前和向后填充模式都被應用。   

 ●  animation-delay屬性定義動畫何時開始。該屬性允許負值，示例中延遲0.16s執(zhí)行動畫。         

CSS Code復制內(nèi)容到剪貼板
  1. #loader7:before,     
  2. #loader7:after,     
  3. #loader7 {     
  4.   border-radius: 50%;     
  5.   width: 2.5em;     
  6.   height: 2.5em;     
  7.   -webkit-animation-fill-mode: both;     
  8.   animation-fill-mode: both;     
  9.   -webkit-animation: load7 1.8s infinite ease-in-out;     
  10.   animation: load7 1.8s infinite ease-in-out;     
  11. }     
  12. #loader7 {     
  13.   margin: 60px 50px;     
  14.   float: left;     
  15.   font-size: 10px;     
  16.   position: relative;     
  17.   text-indent: -9999em;     
  18.   -webkit-animation-delay: 0.16s;     
  19.   animation-delay: 0.16s;     
  20. }     
  21. #loader7:before {     
  22.   left: -3.5em;     
  23. }     
  24. #loader7:after {     
  25.   left: 3.5em;     
  26.   -webkit-animation-delay: 0.32s;     
  27.   animation-delay: 0.32s;     
  28. }     
  29. #loader7:before,     
  30. #loader7:after {     
  31.   content: '';     
  32.   position: absolute;     
  33.   top: 0;     
  34. }     
  35. @-webkit-keyframes load7 {     
  36.   0%,     
  37.   80%,     
  38.   100% {     
  39.     box-shadow: 0 2.5em 0 -1.3em #000000;     
  40.   }     
  41.   40% {     
  42.     box-shadow: 0 2.5em 0 0 #000000;     
  43.   }     
  44. }     
  45. @keyframes load7 {     
  46.   0%,     
  47.   80%,     
  48.   100% {     
  49.     box-shadow: 0 2.5em 0 -1.3em #000000;     
  50.   }     
  51.   40% {     
  52.     box-shadow: 0 2.5em 0 0 #000000;     
  53.   }     
  54. }   

 以上就是本文的全部內(nèi)容，希望對大家學習CSS樣式進行加載有所幫助。

相關文章

最新評論