css3 扇形

来源：互联网发布：xy网络流行什么意思编辑：程序博客网时间：2024/05/17 02:08
<!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>
0 0