曾經(jīng)以為，loading的制作需要一些比較高深的web動畫技術(shù)，后來發(fā)現(xiàn)大多數(shù)loading都可以用“障眼法”做出來。比如一個旋轉(zhuǎn)的圓圈，并不都是將gif圖放進去，有些就是畫個靜止圖像，然后讓它旋轉(zhuǎn)就完了。gif圖也可以，但是加載時間比較長。
CSS的animation可以做出大多數(shù)的loading，比如：
loading1：
1、HTML：
<div id="ddr"> <div class="ddr ddr1"></div> <div class="ddr ddr2"></div> <div class="ddr ddr3"></div> <div class="ddr ddr4"></div> <div class="ddr ddr5"></div></div>
2、CSS：
#ddr{ margin: 0 auto; width: 70px; height: 120px;}.ddr{ width: 10px; height: 120px; float: left; margin: 2px; background-color: #00ff00; animation: loading 1s infinite ease-in-out;/*animation：動畫名稱 持續(xù)時間 動畫速度曲線 延遲 執(zhí)行多少次 是否正反方向輪流播放*/}.ddr2{ animation-delay: -0.9s;/*定義開始執(zhí)行的地方，負號表示直接從第900ms開始執(zhí)行*/}.ddr3{ animation-delay: -0.8s;}.ddr4{ animation-delay: -0.7s;}.ddr5{ animation-delay: -0.6s;}@keyframes loading { 0%,40%,100%{ /*定義每幀的動作*/ -webkit-transform: scaleY(0.5); } 20%{ -webkit-transform: scaleY(1); }}loading2：
1、HTML：
<div id="circle"></div>
2、CSS：
#circle{ margin: 20px auto; width: 100px; height: 100px; border: 5px white solid; border-left-color: #ff5500; border-right-color:#0c80fe; border-radius: 100%; animation: loading1 1s infinite linear;}@keyframes loading1{ from{transform: rotate(0deg)}to{transform: rotate(360deg)}}loading3：
1、HTML：
<div id="loader"> <div id="loader-inner"></div> </div>
2、CSS：
#loader3{ box-sizing: border-box; position: relative; margin-left: 48%; transform: rotate(180deg); width: 50px; height: 50px; border: 10px groove rgb(170, 18, 201); border-radius: 50%; animation: loader-3 1s ease-out alternate infinite;/* alternate表示則動畫會在奇數(shù)次數(shù)（1、3、5 等等）正常播放，而在偶數(shù)次數(shù)（2、4、6 等等）反向播放 */}#loader3-inner{ box-sizing: border-box; width: 100%; height: 100%; border: 0 inset rgb(170, 18, 201); border-radius: 50%; animation: border-zoom 1s ease-out alternate infinite;}@keyframes loader-3 { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(-360deg); }}@keyframes border-zoom { 0%{ border-width: 0px; } 100%{ border-width: 10px; }}loading4：
1、HTML：
<div id="loading"> <div id="loader" class="heart"></div> </div>
2、CSS：
#loading4{ width: 100%; height: 100px;}#loader4{ position: relative; margin-left: calc(50% - 25px); width: 50px; height: 50px; animation: loader-4 1s ease-in-out alternate infinite;}.heart:before{ position: absolute; left: 11px; content: ""; width: 50px; height: 80px; transform: rotate(45deg); background-color: rgb(230, 6, 6); border-radius: 50px 50px 0 0;}.heart:after{ position: absolute; right: 11px; content: ""; width: 50px; height: 80px; background-color: rgb(230, 6, 6); transform: rotate(-45deg); border-radius: 50px 50px 0 0;}@keyframes loader-4 { 0%{ transform: scale(0.2); opacity: 0.5; } 100%{ transform: scale(1); opacity: 1; }}逢年過節(jié)，百度或者谷歌都會在首頁播放一段動畫，比如元宵節(jié)：
這個動畫不是gif圖，而是一張長長的包含所有幀的圖片：
仿照animation一幀一楨的思路，可以將這張圖片做成動畫：
#picHolder{ /* 圖片樣式 */ position: absolute; top: %; left: %; width: px; height: px; margin-left:-px; background-image: url("../../../Library_image/tangyuan.png"); background-repeat: no-repeat; background-position-x: ; cursor: pointer; } function animation () { /* 定時移動圖片，使觀眾看到不同的幀 */ var po = var i = var holder = document.getElementById('picHolder') setInterval(function () { po += - i++ holder.style.backgroundPositionX = po + 'px' if (i >= ) { i = po = } }, ) } window.onload = function () { animation() }總結(jié)
以上所述是小編給大家介紹的CSS實現(xiàn)一個簡單loading動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
