CSS3 超酷Loading效果

2024-09-05 12:18:58

字体：大中小

来源：转载

供稿：网友

<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 id="loading"><div class="loadingWrap">	<span class="loadingLeft"></span>	<span class="loadingRight"></span>	<span class="loadingTop"></span>	<span class="loadingBottom"></SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div 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 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">

学习交流