css3 radius实现圆形动画特效css代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3 radius实现圆形动画特效css代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
<meta charset="gb2312">
<title>css3 radius实现圆形动画特效</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
<div id="caseBlanche">
  <div id="rond">
    <div id="test"></div>
  </div>
  <div id="load">
    <p></p>
  </div>
</div>

<div id="caseBlanche2">
  <div id="rond">
    <div id="test"></div>
  </div>
  <div id="load">
    <p></p>
  </div>
</div>

<div id="caseBlanche3">
  <div id="rond">
    <div id="test"></div>
  </div>
  <div id="load">
    <p></p>
  </div>
</div>

<div id="caseBlanche4">
  <div id="rond">
    <div id="test"></div>
  </div>
  <div id="load">
    <p></p>
  </div>
</div>
<div id="caseBlanche5">
  <div id="rond">
    <div id="test"></div>
  </div>
  <div id="load">
    <p></p>
  </div>
</div>
<div id="caseBlanche6">
  <div id="rond">
    <div id="test"></div>
  </div>
  <div id="load">
    <p></p>
  </div>
</div>
<div id="caseBlanche7">
  <div id="rond">
    <div id="test"></div>
  </div>
  <div id="load">
    <p></p>
  </div>
</div>
</body>
</html>

CSS代码(style.css):

*{padding:0px;margin:0px;}
body{background:#F6F6F6;font-size:14px;}
/****涓€娆℃€?***/
#caseBlanche{height:100px;width:100px;position:absolute;left:-10px;top:20px;}
#caseBlanche #load{color:#fff;font-family:calibri;text-align:center;position:absolute;top:32px;left:26px;height:80px;width:80px;border-radius:40px;background:#0CF;}
#caseBlanche #load p{line-height:80px;}
/****DEBUT TEST****/
#test{height:10px;width:10px;position:absolute;background-color:#0CF;border-radius:50%;top:0px;left:10px;margin:5px;}
#rond{height:100px;width:100px;border:1px solid #0CF;border-radius:50%;position:absolute;top:20px;left:15px;animation:rond 3s infinite;-webkit-animation:rond 3s infinite;}
@keyframes rond{0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-webkit-keyframes rond{0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
/****绗竴涓?***/
/****娴侀噺鍖呮湀****/
#caseBlanche2{height:100px;width:100px;position:absolute;top:100px;left:100px;}
#caseBlanche2 #load{color:#fff;font-family:calibri;text-align:center;position:absolute;top:32px;left:26px;height:80px;width:80px;border-radius:40px;background:#F60;}
#caseBlanche2 #load p{line-height:80px;}
#caseBlanche2 #test{height:10px;width:10px;position:absolute;background-color:#F60;border-radius:50%;top:0px;left:10px;margin:5px;}
#caseBlanche2 #rond{height:100px;width:100px;border:1px solid #F60;border-radius:50%;position:absolute;top:20px;left:15px;animation:rond 3s infinite;-webkit-animation:rond 3s infinite;}
/****绗簩涓?***/
/****娴侀噺鍖呮棩****/
#caseBlanche3{height:100px;width:100px;position:absolute;top:140px;left:-10px;}
#caseBlanche3 #load{color:#fff;font-family:calibri;text-align:center;position:absolute;top:32px;left:26px;height:80px;width:80px;border-radius:40px;background:#0C3;}
#caseBlanche3 #load p{line-height:80px;}
#caseBlanche3 #test{height:10px;width:10px;position:absolute;background-color:#0C3;border-radius:50%;top:0px;left:10px;margin:5px;}
#caseBlanche3 #rond{height:100px;width:100px;border:1px solid #0C3;border-radius:50%;position:absolute;top:20px;left:15px;animation:rond 3s infinite;-webkit-animation:rond 3s infinite;}
/****绗笁涓?***/
/****澶滈棿娴侀噺****/
#caseBlanche4{height:100px;width:100px;position:absolute;top:20px;left:200px;}
#caseBlanche4 #load{color:#fff;font-family:calibri;text-align:center;position:absolute;top:32px;left:26px;height:80px;width:80px;border-radius:40px;background:#900;}
#caseBlanche4 #load p{line-height:80px;}
#caseBlanche4 #test{height:10px;width:10px;position:absolute;background-color:#900;border-radius:50%;top:0px;left:10px;margin:5px;}
#caseBlanche4 #rond{height:100px;width:100px;border:1px solid #900;border-radius:50%;position:absolute;top:20px;left:15px;animation:rond 3s infinite;-webkit-animation:rond 3s infinite;}
/****绗洓涓?***/
/****瀹氬悜娴侀噺****/
#caseBlanche5{height:100px;width:100px;position:absolute;top:140px;left:200px;}
#caseBlanche5 #load{color:#fff;font-family:calibri;text-align:center;position:absolute;top:32px;left:26px;height:80px;width:80px;border-radius:40px;background:#CC3;}
#caseBlanche5 #load p{line-height:80px;}
#caseBlanche5 #test{height:10px;width:10px;position:absolute;background-color:#CC3;border-radius:50%;top:0px;left:10px;margin:5px;}
#caseBlanche5 #rond{height:100px;width:100px;border:1px solid #CC3;border-radius:50%;position:absolute;top:20px;left:15px;animation:rond 3s infinite;-webkit-animation:rond 3s infinite;}
/****绗簲涓?***/
/****4G涓撲韩娴侀噺****/
#caseBlanche6{height:100px;width:100px;position:absolute;top:210px;left:100px;}
#caseBlanche6 #load{color:#fff;font-family:calibri;text-align:center;position:absolute;top:32px;left:26px;height:80px;width:80px;border-radius:40px;background:#F0F;}
#caseBlanche6 #load p{line-height:80px;}
#caseBlanche6 #test{height:10px;width:10px;position:absolute;background-color:#F0F;border-radius:50%;top:0px;left:10px;margin:5px;}
#caseBlanche6 #rond{height:100px;width:100px;border:1px solid #F0F;border-radius:50%;position:absolute;top:20px;left:15px;animation:rond 3s infinite;-webkit-animation:rond 3s infinite;}
/****绗叚涓?***/
/****4G鍔犻娴侀噺****/
#caseBlanche7{height:100px;width:100px;position:absolute;top:-10px;left:100px;}
#caseBlanche7 #load{color:#fff;font-family:calibri;text-align:center;position:absolute;top:32px;left:26px;height:80px;width:80px;border-radius:40px;background:#06F;}
#caseBlanche7 #load p{line-height:80px;}
#caseBlanche7 #test{height:10px;width:10px;position:absolute;background-color:#06F;border-radius:50%;top:0px;left:10px;margin:5px;}
#caseBlanche7 #rond{height:100px;width:100px;border:1px solid #06F;border-radius:50%;position:absolute;top:20px;left:15px;animation:rond 3s infinite;-webkit-animation:rond 3s infinite;}
/****绗竷涓?***/

附件:下载该文件资源,减少时间成本(增值服务)