首页 > 代码库 > 扁形/环形加载
扁形/环形加载
知识点:
变形属性: 边框圆 (border-radius)/中心点 (transform-origin), 旋转 (transform:rotate) / 裁剪 (clip) [or 高宽一半]
通过js 控制进度
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>
例子:
http://www.yangqq.com/web/css3demo/index.html
CSS制作图形速查表
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet
扁形/环形加载
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。