如何使用纯css制作扇形图，合并起来形成饼图

html-css026

如何使用纯css制作扇形图，合并起来形成饼图,第1张

使用纯css制作扇形图，合并起来形成饼图：

应该知道css3中引入了圆角属性（border-radius），一旦设置这个值，边框即会出现圆角。同样，我们对正方形设置圆角，即可得到饼状图

html：<div id="circle">11</div>

css：

#circle{

width:0

height:0

border-radius:100px

border-width:100px

border-style:solid

border-color: red blue green yellow

line-height:99em

overflow:hidden

cursor:pointer

margin: 30px auto

}

效果：

4.同样我们对其中三个边框设置透明色即可得到扇形

html：<div id="fan">11</div>

css:

#fan{

width:0

height:0

border-radius:100px

border-width:100px

border-style:solid

border-color:red transparent transparent transparent

line-height:99em

overflow:hidden

cursor:pointer

margin: 30px auto

}

效果：

简单， 主要是用好border 想要任意角度的话 多弄几个 重叠在上面（配合 transform：rotate（deg）使用） 如果你想知道css3的更多秘密 那么就去购买 Lea的 css secret

<!DOCTYPE html>

<html>

<head>

<title>css模拟手机安装图标效果</title>

<meta charset="UTF-8">

<style>

*{/*外层margin,padding设置0*/

margin:0

padding:0

}

#abox{/*外层大容器相对定位，宽度高度各100px*/

position:relative

width:100px

height:100px

margin-left:100px

margin-top:100px

}

#abox::after{/*伪元素设置安装中字样，绑定动画myfirst3，安装完毕后安装中字样消失*/

content:""

display:block

width:100%

position:absolute

color:white

bottom:0

left:0

text-align:center

font-size:14px

font-weight:bold

animation:myfirst3 10s

-webkit-animation:myfirst3 10s/* Safari and Chrome */

}

@keyframes myfirst3/*安装中文字动画*/

{

from {

content:"安装中"

}

to {

content:""

}

}

#box1{/*底层图片，被透明的黑色层遮住*/

position:relative

width:100px

height:100px

background:url("123.png")

background-size:100% 100%

}

#box1::after{/*设置一个伪元素，让其绑定一个动画，透明度在动画完毕后变得完全透明*/

content:""

display:block

position:absolute

width:100%

height:100%

top:0

left:0

animation:myfirst2 10s

-webkit-animation:myfirst2 10s/* Safari and Chrome */

}

@keyframes myfirst2

{

from {

background:black

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

}

to {

background:none

filter:alpha(Opacity=0)

-moz-opacity:0

opacity:0

}

}

#box2{/*黑色层容器，绝对定位*/

position:absolute

width:60px

height:60px

top:20px

left:20px

overflow:hidden

border-radius:50%

}

#box2 img{/*插入一张图片，让其可以覆盖背景图片，且显示出效果*/

width:100px

height:100px

margin-top:-20px

margin-left:-20px

}

#box3{/*扇形黑色容器变化容器，注意控制left和top让其居中*/

position:absolute

width:46px

height:46px

left:7px

top:7px

border-radius:50%

animation:myfirst 3s/*绑定扇形变化动画效果*/

-webkit-animation:myfirst 3s/* Safari and Chrome */

}

@keyframes myfirst/*扇形黑色容器变化动画,利用css的裁剪功能模拟扇形变化*/

{

0%{

clip-path: polygon(50% 50%, 68% 0, 100% 0, 100% 100%, 0 100%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

10%{

clip-path: polygon(50% 50%, 100% 26%, 100% 45%, 100% 100%, 0 100%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

20%{

clip-path: polygon(50% 50%, 100% 71%, 100% 86%, 100% 100%, 0 100%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

30%{

clip-path: polygon(50% 50%, 100% 100%, 58% 100%, 34% 100%, 0 100%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

40%{

clip-path: polygon(50% 50%, 59% 100%, 7% 100%, 0 100%, 0 74%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

50%{

clip-path: polygon(50% 50%, 19% 100%, 0 100%, 0 58%, 0 35%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

60%{

clip-path: polygon(50% 50%, 0 78%, 0 51%, 0 29%, 0 18%, 0 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

70%{

clip-path: polygon(50% 50%, 0 40%, 0 27%, 0 13%, 0 0, 28% 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

80%{

clip-path: polygon(50% 50%, 0 11%, 0 0, 13% 0, 25% 0, 38% 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

90%{

clip-path: polygon(50% 50%, 7% 0, 15% 0, 23% 0, 32% 0, 41% 0, 52% 0)

filter:alpha(Opacity=60)

-moz-opacity:0.6

opacity:0.6

background:black

}

100%{

clip-path: polygon(50% 50%, 52% 0, 52% 0, 52% 0, 51% 0, 52% 0, 52% 0)

filter:alpha(Opacity=0)

-moz-opacity:0

opacity:0

background:none

}

}

</style>

</head>

<body>

<div id="abox"><!--外层容器-->

<div id="box1"></div><!---第一层背景容器-->

<div id="box2"><!--第二层图片容器-->

<div id="box3"></div>

<img src="123.png">

</div>

</div>

</body>

</html>