今天教大家一個在你WordPress網站訪問有點慢時，可以提高用戶體驗的純CSS「加載中」動畫
外掛（插件）版
一、添加CSS動畫代碼
1、這是最主要的一個步驟，用處時來顯示加載中的動畫
2、把下列代碼添加到你主題的「樣式表 (style.css)」文件內添加下列代碼就可以啦
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
/** 「載入中」動畫 **/ #circle { background-color: rgba(0,0,0,0); border:5px solid rgba(10,10,10,0.9); opacity:.9; border-right:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 35px #808080; z-index:1000; width:50px; height:50px; margin:0 auto; position:fixed; left:30px; bottom:30px; -moz-animation:spinPulse 1s infinite ease-in-out; -webkit-animation:spinPulse 1s infinite ease-in-out; -o-animation:spinPulse 1s infinite ease-in-out; -ms-animation:spinPulse 1s infinite ease-in-out; } #circle1 { background-color: rgba(0,0,0,0); border:5px solid rgba(20,20,20,0.9); opacity:.9; border-left:5px solid rgba(0,0,0,0); border-right:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #202020; z-index:1000; width:30px; height:30px; margin:0 auto; position:fixed; left:40px; bottom:40px; -moz-animation:spinoffPulse 1s infinite linear; -webkit-animation:spinoffPulse 1s infinite linear; -o-animation:spinoffPulse 1s infinite linear; -ms-animation:spinoffPulse 1s infinite linear; } @-moz-keyframes spinPulse { 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050;} 50% { -moz-transform:rotate(145deg); opacity:1; } 100% { -moz-transform:rotate(-320deg); opacity:0; } } @-moz-keyframes spinoffPulse { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); } } @-webkit-keyframes spinPulse { 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; } 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; } } @-webkit-keyframes spinoffPulse { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } @-o-keyframes spinPulse { 0% { -o-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; } 50% { -o-transform:rotate(145deg); opacity:1;} 100% { -o-transform:rotate(-320deg); opacity:0; } } @-o-keyframes spinoffPulse { 0% { -o-transform:rotate(0deg); } 100% { -o-transform:rotate(360deg); } } @-ms-keyframes spinPulse { 0% { -ms-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; } 50% { -ms-transform:rotate(145deg); opacity:1;} 100% { -ms-transform:rotate(-320deg); opacity:0; } } @-ms-keyframes spinoffPulse { 0% { -ms-transform:rotate(0deg); } 100% { -ms-transform:rotate(360deg); } } |
二、添加顯示代碼
1、這一步的用處是把前面的CSS代碼顯示出來
2、在主題內的「頁首 (header.php)」文件的 <body> 後同樣添加下列代碼
|
1 |
<div id="circle"></div><div id="circle1"></div> |
三、添加jQuery漸隱效果
1、這個步驟是用於在網頁加載完成後是加載動畫漸漸消失，而不是一直不停地轉動
2、在「頁尾 (footer.php)」內的 </body> 前添加下列代碼就完咯
|
1 2 3 4 5 6 |
<script> jQuery(window).load(function() { jQuery("#circle").fadeOut(500); jQuery("#circle1").fadeOut(700); }); </script> |
預覽
本頁左下角會永遠旋轉「加載中」動畫
參考
總結
1、完成以上步驟後要清空快取才能顯示效果 
2、有問題可以回覆 
