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

 

 

GitHub地址：https://github.com/ConnorAtherton/loaders.css

 

軟件首頁：https://connoratherton.com/loaders