CSS3 超酷Loading效果

超酷的風車效果CSS3 Loading，可用于圖片加載、文字加載、圖片切換、幻燈片中，運行本效果后能看到一個基于CSS3自繪的購車在不停旋轉，寓意正在加載中。測試請用火狐、Chrome、Opera等瀏覽器。

<html><head><title>超酷風車效果CSS3 Loading</title><style>.loadingWrap{width: 50px;height: 50px;position: absolute;left: 50%;top: 50%;margin-left: -25px;margin-top: -100px;-webkit-animation: loading 2s linear infinite;-moz-animation: loading 2s linear infinite;-webkit-transform-origin: center center;-moz-transform-origin: center center;}@-webkit-keyframes 'loading'{from{-webkit-transform: rotate(0);}to{-webkit-transform: rotate(360deg);}@-moz-keyframes loading{from{-moz-transform: roate(0);}to{-moz-transform: rotate(360deg);}}.loadingLeft,.loadingRight,.loadingTop,.loadingBottom{width: 50px;height: 50px;position: absolute;border-style: solid;}.loadingLeft{top: 15px;left: 10px;border-width: 0 0 0 5px;border-radius: 50% 0 0 50%;border-color: #223A63;}.loadingRight{bottom: 15px;right: 10px;border-width: 0 5px 0 0;border-radius: 0 50% 50% 0;border-color: #558985;}.loadingTop{top: 10px;right: 15px;border-width: 5px 0 0 0;border-radius: 50% 50% 0 0;border-color: #83ae89;}.loadingBottom{bottom: 10px;left: 15px;border-width: 0 0 5px 0;border-radius: 0 0 50% 50%;border-color: #ced6ad;}</style></head><body><div   class="ekwamkc"   id="loading"><div   id="kym6yke"   class="loadingWrap">	<span id="qcg4c4i"    class="loadingLeft"></span>	<span id="yko88am"    class="loadingRight"></span>	<span id="qm8g6yu"    class="loadingTop"></span>	<span id="uwkgogu"    class="loadingBottom"></SPAN>
</div>
</div>
<div   id="yocywak"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="s86wceu"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557101.html'>jquery+html5+canvas餅形圖表特效</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557103.html'>用HTML5 Canvas勾畫簡單流程圖示例</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="a64esu6"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流