圆环进度css
看效果先：http://sandbox.runjs.cn/show/b6bmksvn
参考：
clip:rect下png通道透明下sprite图片定位实例页面
代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.clip-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 400px;
height:400px;
background-color: #ffb348;
border-radius: 50%;
}
.clip-wrap .left,.clip-wrap .right {
position: absolute;
top:0;
left:0;
width: 100%;
height:100%;
background-color: #cccccc;
border-radius: 50%;
-webkit-transition: all 0.5s linear;
}
.clip-wrap .left {
clip: rect(0 ,200px,400px,0);
}
.clip-wrap .right {
clip: rect(0 ,400px,400px,200px);
}
.mask {
position: absolute;
top:50%;
left:50%;
margin-left: -180px;
margin-top: -180px;
width:360px;
height:360px;
background-color: #fff;
border-radius: 50%;
line-height: 360px;
text-align: center;
font-size: 100px;
color: #ff9f40;
}
.left-wrap {
position: absolute;
top:0;
left:0;
width: 100%;
height:100%;
clip: rect(0 ,200px,400px,0);
}
.right-wrap {
position: absolute;
top:0;
left:0;
width: 100%;
height:100%;
clip: rect(0 ,400px,400px,200px);
}
</style>
</head>
<body>
<div class="clip-wrap">
<div class="left-wrap">
<div class="left"></div>
</div>
<div class="right-wrap">
<div class="right"></div>
</div>
<div class="mask">
<span class="num">0</span>%
</div>
</div>
<button>0%</button>
<button>10%</button>
<button>30%</button>
<button>50%</button>
<button>80%</button>
<button>100%</button>
</body>
<script>
function changeView(num) {
var deg = num * 3.6; // 把360度分成100份
document.querySelector('.num').textContent = num;
if(deg<180) {
document.querySelector('.left').style.webkitTransform = 'rotate('+(0)+'deg)';
document.querySelector('.right').style.webkitTransform = 'rotate('+deg+'deg)';
}else {
document.querySelector('.right').style.webkitTransform = 'rotate('+180+'deg)';
document.querySelector('.left').style.webkitTransform = 'rotate('+(deg-180)+'deg)';
}
}
var btn = document.querySelectorAll('button');
for(var i = 0,len = btn.length; i< len; i++) {
(function(i) {
btn[i].onclick = function() {
var num = parseInt(this.textContent);
changeView(num);
}
})(i)
}
</script>
</html>- 上一篇 »软件工程学习进度第五周暨暑期学习进度之第五周汇总
- 下一篇 »CSS 学习笔记
