整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前做網站開發，大都喜歡用一些小圖片小圖標，但由于使用小圖標會增加Request的次數并增加網頁大小。這樣的用戶體驗以及對SEO都不太友好。所以后來推出了字體圖標，如font-awesome。
在網站中，特別是使用AJAX技術，Loading圖標必不可少，大多數人都是使用一個gif圖片來做，這里我介紹使用CSS3動畫技術來實現Loading特效，有些人也許會說IE怎么辦，我只能說，忘了它吧。先來個效果圖：
這里沒有動畫效果，本來想將CSS動畫錄制為gif的，但錄制效果太差，放棄了，只貼這個圖片吧，如果有朋友知道有錄制效果好的軟件，麻煩告之，不勝感激。需要查看實際效果的朋友，可復制代碼運行即可。
html完整代碼：
<html>
<head>
<title>css3動畫實現超酷loading特效</title>
<style type="text/css">
.loading {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
.spinner-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 300;
height: 100%;
min-width: 100%;
min-height: 100%;
background: rgba(255,255,255,0.93);
}
.spinner {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
animation: 1.5s ease 0s normal none infinite running spin;
border-color: rgba(255, 0, 0, 1) transparent;
border-image: none;
border-radius: 50px;
border-style: solid;
border-width: 20px;
display: block;
height: 1px;
left: 50%;
margin-left: -160px;
position: absolute;
top: 45%;
width: 1px;
}
.spinner-text {
color: #000;
font-family: Arial;
font-size: 20px;
left: 50%;
letter-spacing: 1px;
margin-left: -100px;
margin-top: 2px;
position: absolute;
top: 45%;
}
@keyframes spin {
0%, 100% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(720deg) scale(0.6);
}
}
@keyframes spin {
0%, 100% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(720deg) scale(0.6);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="spiner-wrapper">
<div class="spinner-wrapper">
<span class="spinner-text">數據加載中，請稍候...</span>
<span class="spinner"></span>
</div>
</div>
</div>
</body>
</html>
上面即為本動畫效果所有代碼，直接復制代碼便可輕松應用到你的網頁中。從此告別gif吧，同時跟低版本的IE告別吧。
擊上方 "程序員小樂"關注, 星標或置頂一起成長
loaders.css是Github上一個使用純粹的css實現的開源loading動畫庫，完全用CSS編寫的加載動畫的集合。每個動畫僅限于CSS屬性的一小部分，以避免復雜的繪畫和布局計算。下面這張圖是在demo頁面截取的Gif效果圖，可供參考！
就這樣一個小小的庫也收獲了9.5k的stars，以下是其倉庫源地址
https://github.com/ConnorAtherton/loaders.css
自由選擇安裝方式進行安裝使用
bower install loaders.cssnpm i --save loaders.css1、標準用法
jQuery（可選）
將樣式添加到正確的子div元素
.ball-grid-pulse > div {
background-color: orange;
}使用2D比例轉換
.loader-small .loader-inner {
transform: scale(0.5, 0.5);
}Loaders.css衍生了很多適用于其它平臺或框架的優秀庫，這些都是受Loaders.css的啟發而產生的
https://github.com/jonjaques/react-loaders
https://github.com/Hokid/vue-loaders
https://github.com/Masadow
https://github.com/kaermorchen/ember-cli-loaders
https://github.com/gontovnik/DGActivityIndicatorView
https://github.com/varunsridharan/Loaders.CSS-Android-App
Loaders.css是一個非常出色的loading動畫庫，可以將它運用到你任何新的或者現有的項目中，性能出眾，定制化，enjoy it！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
