<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style>
.radiv cite { position: relative; float: left; }
.rotate1 { top: 0; left: 0; position: absolute; width: 100px; height: 100px;clip: rect(0px,50px,100px,0px); border-radius: 100px; background-color: yellow;z-index: 3; }
.rotate2 { top: 0; left: 0; position: absolute; width: 100px; height: 100px; transform: rotate(-00deg); -webkit-transform: rotate(0deg); clip: rect(0px,50px,100px,0px); border-radius: 100px; background-color: #dddddd; z-index: 5;}
.rotate3 { top: 0; left: 0; position: absolute; width: 100px; height: 100px; transform: rotate(180deg); -webkit-transform: rotate(180deg); clip: rect(0px,50px,100px,0px); border-radius: 100px; background-color: yellow; z-index: 3; }
.rotate4 { top: 0; left: 0; position: absolute; width: 100px; height: 100px; /*transform: rotate(-00deg);*/
clip: rect(0px,50px,100px,0px); border-radius: 100px; background-color: yellow;z-index: 4; }
.fzabout { height: auto; ; }
.fzabout cite { width: 100px; height: 100px; display: block; position: relative; margin: 0 auto; }
.fzabout cite .bg{ position: absolute;left:0;top:0; width: 100px; height: 100px; background: #dddddd; z-index: 2; border-radius: 100%;}
.fzabout cite.a1 .fontdiv font{ color: #4cb7b2;}
.fzabout cite.a2 .fontdiv font{ color: #da5550;}
.fzabout cite.a3 .fontdiv font{ color: #bf954d;}
.fzabout cite.a1 .rotate1,.fzabout cite.a1 .rotate3,.fzabout cite.a1 .rotate4{background-color: #4cb7b2;}
.fzabout cite.a2 .rotate1,.fzabout cite.a2 .rotate3,.fzabout cite.a2 .rotate4{background-color: #da5550;}
.fzabout cite.a3 .rotate1,.fzabout cite.a3 .rotate3,.fzabout cite.a3 .rotate4{background-color: #bf954d;}
.fzabout .fontdiv { position: absolute; width: 90px; height: 90px; overflow: hidden; left: 5px; top: 5px; z-index: 10; font-style: normal; font-size: 12px; background: #fff; border-radius: 50%; text-align:center }
.fzabout .fontdiv font { display: block; font-style: normal; font-size: 21px; margin: 16px 0 5px 0; }
.fzabout .fontdiv span { display: block; font-style: normal; font-size: 16px; }
.fzabout dl { overflow: hidden; float:left }
.fzabout dl dd { margin: 10px 0; }
.fzabout dl dt strong{ font-weight: normal;}
</style>
<div class="fzabout">
<dl class="a1">
<dd>
<cite class="a1 b1" >
</cite>
</dd>
</dl>
<dl class="a2 b1">
<dd>
<cite class="a2 b2" >
</cite>
</dd>
</dl>
<dl class="a3 b1">
<dd>
<cite class="a3 b3" >
</cite>
</dd>
</dl>
<div style=" clear:both"></div>
<dl class="a1 ">
<dd>
<cite class="a1 b4" >
</cite>
</dd>
</dl>
<dl class="a2">
<dd>
<cite class="a2 b5" >
</cite>
</dd>
</dl>
<dl class="a3">
<dd>
<cite class="a3 b6" >
</cite>
</dd>
</dl>
</ul>
<script type="text/javascript" src="../public/js/jquery-2.0.3.min.js"></script>
<script>
rotate($(".fzabout cite.b1"),55,"200")
rotate($(".fzabout cite.b2"),40,"ds")
rotate($(".fzabout cite.b3"),80,"333")
function rotate(obj,deg,size){
var deg1=360*(deg/100)
if(deg<51){
obj.html('<div class="fontdiv"><font>'+deg+'%</font><span>'+size+'</span></div><i class="rotate1" style="transform: rotate('+deg1+'deg);-webkit-transform: rotate('+deg1+'deg);"></i><i class="rotate2" ></i><i class="bg"></i>')
}else{
obj.html('<div class="fontdiv"><font>'+deg+'%</font><span>'+size+'</span></div><i class="rotate3"></i><i class="rotate4" style="transform: rotate('+deg1+'deg);-webkit-transform: rotate('+deg1+'deg);"></i><i class="bg"></i>')
}
}
rotate1($(".fzabout cite.b4"),55)
rotate1($(".fzabout cite.b5"),40)
rotate1($(".fzabout cite.b6"),80)
function rotate1(obj,deg){
var deg1=360*(deg/100)
if(deg<51){
obj.html('<i class="rotate1" style="transform: rotate('+deg1+'deg);-webkit-transform: rotate('+deg1+'deg);"></i><i class="rotate2" style=" background:#fff"></i>')
}else{
obj.html('<i class="rotate3"></i><i class="rotate4" style="transform: rotate('+deg1+'deg);-webkit-transform: rotate('+deg1+'deg);"></i>')
}
}
</script>
</body>
</html>
扫一扫
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
