知识点:
变形属性: 边框圆 (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/