CSS載入動畫框架Loaders.css

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

Loaders.css是一款非常出色的載入動畫框架，Loaders.css利用純CSS可以實現很多種樣式的Loading載入動畫，這些動畫並不需要圖片來輔助，而是僅僅需要CSS即可實現，因此執行效率比較不錯。

Loaders.css的特點

• 基於純CSS，不需JavaScript指令碼，也不需要圖片，很乾淨。
• 預設提供近30個不同的Loading動畫效果，你也可以發揮自己的想象來實現不同的載入動畫。
• Loaders.css比較輕巧，基本沒什麼臃腫的檔案。
• 免費、開源，這是必須的。

下面是第一行第4個Loading動畫的CSS程式碼，其他的大家可以在原始碼中檢視。

.ball-clip-rotate-pulse {
  position: relative;
  -webkit-transform: translateY(-15px);
  -ms-transform: translateY(-15px);
  transform: translateY(-15px); }

/* line 262, stdin */
.ball-clip-rotate-pulse > div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 100%; }

/* line 269, stdin */
.ball-clip-rotate-pulse > div:first-child {
  background: #fff;
  height: 16px;
  width: 16px;
  top: 9px;
  left: 9px;
  -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }

/* line 277, stdin */
.ball-clip-rotate-pulse > div:last-child {
  position: absolute;
  border: 2px solid #fff;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 2px solid;
  border-color: #fff transparent #fff transparent;
  -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }

線上演示地址：http://static.codeceo.com/demo/201505/loaders.css/index.html

軟體首頁 軟體下載