扁形/环形加载

知识点:

变形属性: 边框圆 (border-radius)/中心点 (transform-origin), 旋转 (transform:rotate) / 裁剪 (clip) [or 高宽一半]

通过js 控制进度

思路方法:一.通过2个半圆分别控制半圆进行转动(2个半圆也有几种实现方法), 二.通过背景属性(比较复杂)

下面通过简单的步骤进行分解:

1.现实半月

假设一个100 x 100的圆, 放入一个元素,那么,高还是100,宽是50,然后改变左上,左下圆角.

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .demo{
 8             position: relative;
 9             margin: 50px auto;
10             width: 400px;
11             height: 400px;
12             border: 1px solid #000;
13         }
14         .left{
15             position: absolute;
16             top: 0;
17             left: 0;
18             background: #c93328;
19             height: 400px;
20             width: 400px;
21             z-index: 1;
22             border-radius:50% 0  0 50%;
23             clip: rect(0px,200px,400px,0px);
24         }
25         .right{
26             position: absolute;
27             top: 0;
28             right: 0;
29             background: green;
30             height: 400px;
31             width: 400px;
32             border-radius:0 50% 50%  0;
33             clip: rect(0px,400px,400px,200px);
34         }
35     </style>
36 </head>
37 <body>
38       <div class="demo">
39           <div class="left"></div>
40           <div class="right"></div>
41       </div>
42 </body>
43 </html>

例子:css3 裁剪半圆

http://www.yangqq.com/web/css3demo/index.html

CSS制作图形速查表

http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet

CSS3实现鸡蛋饼饼状图loading等待转转转(张鑫旭)

http://www.zhangxinxu.com/wordpress/2014/04/css3-pie-loading-waiting-animation/

CSS3+js实现多彩炫酷旋转圆环时钟效果(张鑫旭)

http://www.zhangxinxu.com/wordpress/2010/08/css3js%E5%AE%9E%E7%8E%B0%E5%A4%9A%E5%BD%A9%E7%82%AB%E9%85%B7%E6%97%8B%E8%BD%AC%E5%9C%86%E7%8E%AF%E6%97%B6%E9%92%9F%E6%95%88%E6%9E%9C/