css3圈圈进度条
2016-03-08 15:37
567 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>多用户留言系统-</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> .wrapper{ width:120px; height:120px; position: absolute; left:0px; top:0px; background: #eee; } .circle{ width:120px; height:120px; position: absolute; left:0px; top:0px; } .left-circle{ clip: rect(0,60px,120px,0px); } .right-circle{ clip: rect(0,120px,120px,60px); } .right{ transform: rotate(-180deg); position: absolute; height:100px; width:100px; border-radius: 60px; border: 10px solid red; clip: rect(0,120px,120px,60px); } .left{ height:100px; width:100px; transform: rotate(-180deg); position: absolute; border-radius: 60px; border: 10px solid green; clip: rect(0,60px,120px,0px); } </style> </head> <body> <div class="wrapper"> <div class="circle right-circle"> <div class="right" style="transform: rotate(-160deg);"></div> </div> <div class="circle left-circle"> <div class="left" style="transform: rotate(-180deg);"></div> </div> </div> </body> </html>
原理:
弄一个外部div包裹着,里面有两个二级div,都是只显示一般,左边的只显示左半部,右边的只显示右半部,二级div下都有一个作为旋转的div,他们也是只显示一般,但是和其父级div的方向刚好相反,然后通过旋转来显示出来,当第一个三级div旋转完之后,第二个三级div旋转,直至填满圈圈
相关文章推荐
- CSS垂直水平完全居中手册
- div中文字水平和垂直居中的css代码
- css实现三角箭头(兼容IE6)
- css3伪类温故知新
- CSS清除浮动
- CSS定位属性
- Cnblogs自定义皮肤css样式-星空观测者
- 菜单导航/URHere/面包屑,通过CSS中的content简洁表达代码
- css单位
- CSS常用的属性命名
- 前端试题-CSS试题(1)
- CSS笔记2-样式选择器
- Css 学习笔记--样式引入方式及按权重判断优先级
- CSS3 animation 属性 CSS3 @keyframes 规则
- css中em,rem的解析成px的原理及混用场景
- 解决子元素用css float浮动后父级元素高度自适应高度
- CSS渲染速度改善的十个方法与建议
- 单选 多选按钮的选择
- CSS实现垂直居中
- 纯css实现close - ×