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

html-css012

如何使用纯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

}

效果：

定义

clip 属性设置元素的形状。

当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

继承性：No

说明

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地改变。

脚本语法：

object.style.clip="rect(0px,50px,50px,0px)"在我们的 HTML DOM 教程中，您可以找到更多有关 clip 属性 的细节。

在我们的 HTML DOM 教程中，您也可以找到完整的 Style 对象参考手册。

例子

img

{

clip: rect(10px, 5px, 10px, 5px)

}

值 描述

shape 设置元素的形状。合法的形状值是：rect (top, right, bottom, left)

auto 默认。浏览器可设置元素的形状。

<!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>