SVG霓虹灯效果,用CSS和SVG制作饼图
分类:前端技术

用CSS和SVG制作饼图

2015/08/10 · CSS · SVG

原稿出处: Lea Verou   译文出处:lulux的博客   

在事关到CSS技能时,未有人会比Lea Verou更执着、然而又丰裕聪明,努力去寻找难题的各个技术方案。前段时间,Lea本人写作、设计和出版了一本书——CSS Secrets,那本书特别常有趣,满含一些CSS小技艺以至杀绝广大难点的技能。假使您认为温馨的CSS技巧还不易,看看这本书,你会吃惊的。在此篇文章中,我们发布了书里的后生可畏部总局分,那也被登载在Lea近期在SmashingConf New York的发言内容中——用CSS设计轻易的饼图。注意,因为浏览器的支撑有限,有些demo也许或不能符合规律运维。——编辑

饼图,就算是最轻便易行的唯有两种颜色的款型,用Web技艺创立也并不轻巧,固然都以某个相近的新闻内容,从轻便的总结到进程条目款项标还会有反应计时器。平日是行使外界图像编辑器来分别为三个值创立多少个图像来落到实处,或是使用大型的JavaScript框架来规划更头晕目眩的图片。

固然那个东西并不像它已经看起来那么难以完毕,不过也未曾什么直接並且轻易的不二秘诀。可是,今后早本来就有广大越来越好、更便于维护的格局来促成它。


用 CSS3 绘制你要求的几何图形

2016/08/12 · CSS

初藳出处: 飘泊的诗人   

1、圆形

示例:图片 1

思路:给其它星型成分设置几个丰富大的 border-radius ,就足以把它成为三个圆形.代码如下:

html:

XHTML

<div class="size example1"></div>

1
<div class="size example1"></div>

css:

CSS

.size{ width:200px; height: 200px; background: #8BC34A; } .example1{ border-radius:100px; }

1
2
3
4
5
6
7
8
.size{
    width:200px;
    height: 200px;
    background: #8BC34A;
}
.example1{
    border-radius:100px;
}

2、自适应椭圆

图片 2

思路:border-radius 那天性情还应该有此外多个鲜为人知的实质,它不但能够选择长度值,还足以承当百分比率。这几个百分比值会基于成分的尺码进行分析.那象征相近的比重可能会简政放权出不相同的等级次序和垂直半径。代码如下:

html:

XHTML

<div class="example3"></div>

1
<div class="example3"></div>

css:

CSS

.example3{ width:200px; height: 150px; border-radius:50%; background: #8BC34A; }

1
2
3
4
5
6
.example3{
    width:200px;
    height: 150px;
    border-radius:50%;
    background: #8BC34A;
}

3、自适应的半椭圆:沿横轴劈开的半椭圆

图片 3

思路:border-radius 的语法比大家想像中灵活得多。你也许会惊讶地窥见 border-radius 原本是三个简写属性。第风度翩翩种艺术就是运用它所对应的相继打开式属性:

  • „ border-top-left-radius
  • „ border-top-right-radius
  • „ border-bottom-right-radius
  • „ border-bottom-left-radius

咱俩照旧足认为具有八个角提供完全分歧的水准和垂直半径,方法是在斜杠前线指挥部定 1~4 个值,在斜杠后钦定别的 1~4 个值。譬喻来讲,当 border-radius 的值为10px / 5px 20px 时,其效率一定于 10px 10px 10px 10px / 5px 20px 5px 20px 。

为 border-radius 属性分别钦定4、3、2、1 个由空格分隔的值时,那个值是以如此的法规分配到八个角上的(请留神,对椭圆半径来讲,斜杠前和斜杠后最多能够各有三个参数,这两组值是以相近的诀窍分配到种种角的)

图片 4

代码如下:自适应的半椭圆:沿横轴劈开的半椭圆

html:

XHTML

<div class="example4"></div>

1
<div class="example4"></div>

css:

CSS

.example4{ width:200px; height: 150px; border-radius: 50% / 100% 100% 0 0; background: #8BC34A; }

1
2
3
4
5
6
.example4{
    width:200px;
    height: 150px;
    border-radius: 50% / 100% 100% 0 0;
    background: #8BC34A;
}

4、自适应的半椭圆:沿纵轴劈开的半椭圆

图片 5

思路:自适应的半椭圆:沿纵轴劈开的半椭圆

代码如下:

html:

XHTML

<div class="example5"></div>

1
<div class="example5"></div>

css:

CSS

.example5{ width:200px; height: 150px; border-radius: 100% 0 0 100% / 50%; background: #8BC34A; }

1
2
3
4
5
6
.example5{
    width:200px;
    height: 150px;
    border-radius: 100% 0 0 100% / 50%;
    background: #8BC34A;
}

5、五分之二椭圆

思路:在那之中一个角的程度和垂直半径值都急需是百分之百,而别的多个角都无法设为圆角。

图片 6

代码如下:

html:

XHTML

<div class="example6"></div>

1
<div class="example6"></div>

css:

CSS

.example6{ width:160px; height: 100px; border-radius: 100% 0 0 0; background: #8BC34A; }

1
2
3
4
5
6
.example6{
    width:160px;
    height: 100px;
    border-radius: 100% 0 0 0;
    background: #8BC34A;
}

 6、用椭圆绘制opera浏览器的logo

图片 7

思路:绘制opera浏览器的logo,分析起来简单,就唯有八个图层,一个是最尾部的椭圆,三个是最下边这层的扁圆形。先显明一下最底部的椭圆宽高,量了眨眼之间间,水平升幅为258px,垂直中度为275px,因为其是二个对称的椭圆,未有偏斜度,故4个角均为水平半径为258px,垂直半径为275px的4个非常椭圆,用同大器晚成的方法鲜明最里面包车型大巴扁圆形的半径,因而,八个角均为水平半径120px,垂直半径为229px的扁圆形,代码如下:

html:

XHTML

<div class="opera"> <div class="opera-top"></div> </div>

1
2
3
<div class="opera">
        <div class="opera-top"></div>
</div>

css:

CSS

.opera{ width:258px; height: 275px; background: #F22629; border-radius:258px 258px 258px 258px /275px 275px 275px 275px; position: relative; } .opera-top{ width: 112px; height: 231px; background: #FFFFFF; border-radius: 112px 112px 112px 112px/231px 231px 231px 231px; position: absolute; left: 50%; right: 50%; top: 50%; bottom: 50%; margin-left: -56px; margin-top: -115px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.opera{
    width:258px;
    height: 275px;
    background: #F22629;
    border-radius:258px 258px 258px 258px /275px 275px 275px 275px;
    position: relative;
}
.opera-top{
    width: 112px;
    height: 231px;
    background: #FFFFFF;
    border-radius: 112px 112px 112px 112px/231px 231px 231px 231px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
    margin-left: -56px;
    margin-top: -115px;
}

 7、平行四边形

图片 8

思路:伪元素方案:是把富有样式(背景、边框等)应用到伪成分上,然后再对 伪成分举行变形。因为我们的内容并非带有在伪成分里的,所以内容并不会见对变形的熏陶。代码如下:

html:

XHTML

<div class="button">transform:skew()</div>

1
<div class="button">transform:skew()</div>

css:

CSS

.button { width:200px; height: 100px; position: relative; left: 100px; line-height: 100px; text-align: center; font-weight: bolder; } .button::before { content: ''; /* 用伪成分来生成一个矩形 */   position: absolute;   top: 0; right: 0; bottom: 0; left: 0;   z-index: -1;   transform: skew(45deg);   background: #8BC34A; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.button {
    width:200px;
    height: 100px;
    position: relative;
    left: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bolder;
}
.button::before {
   content: ''; /* 用伪元素来生成一个矩形 */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  transform: skew(45deg);
  background: #8BC34A;
}

工夫总括:那个能力不止对 skew() 变形来讲很有用,还适用于任何任何变形样式,当我们想变形叁个因素而不想变形它的剧情时就能够用到它。

8、菱形

图片 9

思路:我们把那么些本事针对 rotate() 变形样式微微调节一下,再用到三个长方形成分上,就足以超轻便地获得八个菱形。代码如下:

html:

XHTML

<div class="example1">transform:rotate()</div>

1
<div class="example1">transform:rotate()</div>

css:

CSS

.example1 { width:140px; height: 140px; position: relative; left: 100px; line-height: 100px; text-align: center; font-weight: bolder; } .example1::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; transform: rotate(45deg); background: #8BC34A; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.example1 {
    width:140px;
    height: 140px;
    position: relative;
    left: 100px;
    line-height: 100px;
    text-align: center;
    font-weight: bolder;
}
.example1::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    transform: rotate(45deg);
    background: #8BC34A;
}

才具总计:这一个技能的关键在于,大家应用伪成分以至定位属性爆发了三个四方, 然后对伪成分设置样式,并将其放置在其宿主成分的下层。这种思路肖似可以应用在任何场景中,进而获得各式各样的效果。

9、菱形图片

图片 10

思路:基于变形的方案,
笔者们想让图片的增进率与容器的对角线相等,实际不是与边长相等。须要选取勾股定理,这些定律告诉大家,二个纺锤形的对角线长度等于它的边长乘以根号2,也等于1.414 213 562  。因而,把 max-width 的值设置为根号2加倍百分之百也正是 414.421 356 2% 是很合理的,或然把这么些值向上取整为 142% ,因为大家不期待因为计算的舍入难点导致图片在实质上显示时稍小(但稍大是没难点的,反正我们都以在裁切图片嘛)

代码如下:

html:

XHTML

<div class="picture"> <img src="./imgs/7.jpg"> </div>

1
2
3
<div class="picture">
    <img src="./imgs/7.jpg">
</div>

css:

CSS

.picture { width: 200px; transform: rotate(45deg); overflow: hidden; margin: 50px; } .picture img { max-width: 100%; transform: rotate(-45deg) scale(1.42); z-index: -1; position: relative; }

1
2
3
4
5
6
7
8
9
10
11
12
.picture {
    width: 200px;
    transform: rotate(45deg);
    overflow: hidden;
    margin: 50px;
}
.picture img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
    z-index: -1;
    position: relative;
}

技术计算:大家期望图片的尺寸属性保留 百分之百 那一个值,那样当浏览器不扶持变 形样式时照旧能够获取贰个靠边的布局。 „ 通过 scale() 变形样式来缩放图片时,是以它的主导点张开缩放的 (除非大家格外内定了 transform-origin 样式) 。通过 width 属性 来放手图片时,只会以它的左上角为原点实行缩放,从而倒逼大家动用额外的负外边距来把图纸的职责调节回来.

10、切角意义

图片 11

思路:基于background:linear-gradient()的方案:把多个角都做出切角效果了。你要求四层渐变图案,代码如 下所示:

html:

XHTML

<div class="example2">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

1
<div class="example2">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

css:

CSS

.example2{ background: #8BC34A; background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left, linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right, linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right, linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; padding: 1em 1.2em; max-width: 12em; line-height: 1.5em; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.example2{
    background: #8BC34A;
    background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
                linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
                linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
                linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
    line-height: 1.5em;
}

11、弧形切角

图片 12

思路:上述渐变技能还应该有二个变种,能够用来创设弧形切角(很几个人也把这种 效果称为“内凹圆角” ,因为它看起来宛如圆角的反向版本) 。唯生机勃勃的界别 在于,大家会用径向渐变来代替上述线性渐变,代码如下:

html:

XHTML

<div class="example3">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

1
<div class="example3">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>

css:

CSS

.example3{ background: #8BC34A; background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left, radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right, radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; padding: 1em 1.2em; max-width: 12em; }

1
2
3
4
5
6
7
8
9
10
11
12
.example3{
    background: #8BC34A;
    background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left,
                radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right,
                radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right,
                radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
}

 12、轻易的饼图

图片 13

思路:基于 transform 的缓和方案:我们今后能够透过八个 rotate() 变形属性来让那么些伪成分转起来。 假诺大家要展现出 十分四的比率,大家得以钦命旋转的值为 72deg (0.2 × 360 = 72) ,写成 .2turn 会更直观一些。你还足以见到其 他有的旋转值的事态。代码如下:

html:

XHTML

<div class="pie"></div>

1
<div class="pie"></div>

css:

CSS

.pie{ width:140px; height: 140px; background: #8BC34A; border-radius: 50%; background-image: linear-gradient(to right,transparent 50%,#655 0); } .pie::before{ content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; transform: rotate(.1turn);/*10%*/ transform: rotate(.2turn);/*20%*/ transform: rotate(.3turn);/*30%*/ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.pie{
    width:140px;
    height: 140px;
    background: #8BC34A;
    border-radius: 50%;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie::before{
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    transform: rotate(.1turn);/*10%*/
    transform: rotate(.2turn);/*20%*/
    transform: rotate(.3turn);/*30%*/
}

提示:在参数中鲜明角度。turn是圈,1turn = 360deg;其余还应该有弧度rad,2nrad = 1turn = 360deg。如,transform:rotate(2turn); //旋转两圈

图片 14

此措施展现 0 到 二分之一 的比值时运维出色,但假使我们品尝突显 60%的比率时(比方钦命旋转值为 .6turn 时),会现身难点。消除措施:使 用上述本领的多少个反向版本来贯彻那个范围内的比率:设置贰个深铁锈棕的伪 成分,让它在 0 至 .5turn 的限定内转悠。因而,要得到二个 四分之三 比率的饼 图,伪成分的代码恐怕是那般的:

html:

XHTML

<div class="pie2"></div>

1
<div class="pie2"></div>

css:

CSS

.pie2{ width:140px; height: 140px; background: #8BC34A; border-radius: 50%; background-image: linear-gradient(to right,transparent 50%,#655 0); } .pie2::before{ content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background: #655;/*当范围大于八分之四时,要求改换伪成分的背景颜色为#655;*/ transform-origin: left; transform: rotate(.1turn); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.pie2{
    width:140px;
    height: 140px;
    background: #8BC34A;
    border-radius: 50%;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie2::before{
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background: #655;/*当范围大于50%时,需要改变伪元素的背景颜色为#655;*/
    transform-origin: left;
    transform: rotate(.1turn);
}

用 CSS 动画来实现叁个饼图从 0 变化到 百分之百的动画片,进而获得贰个炫目的进程提醒器:

图片 15

代码如下:

html:

XHTML

<div class="pie3"></div>

1
<div class="pie3"></div>

css:

CSS

.pie3 { width:140px; height: 140px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, currentColor 0); color: #655; } .pie3::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 3s linear infinite, bg 6s step-end infinite; } @keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: currentColor; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.pie3 {
    width:140px;
    height: 140px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    color: #655;
}
 
.pie3::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 3s linear infinite, bg 6s step-end infinite;
}
 
@keyframes spin {
    to { transform: rotate(.5turn); }
}
@keyframes bg {
    50% { background: currentColor; }
}

1 赞 8 收藏 评论

图片 16

SVG霓虹灯效果,svg霓虹灯

大巴上逛segmentfault见到生机勃勃篇用纯css和SVG来促成的超赞的功能,以为拿来做一些开场效果动画应该正确。

初藳地址:

感觉很有趣,无独有偶925快到了,就撸了一个破壳日欢娱的

功能图如下:

图片 17

 

就像大器晚成圈圈蚂蚁在它身上爬。。。。。emmmmm奇特的比方

fill:none;能够让图形不被填充,倘诺不增添那生龙活虎属性,则暗许填充颜色是black,这些功能

意识stroke这大器晚成层层属性都很有趣啊,填充啊发光度和stroke-linecap,可是那几个意义用的最多的恐怕stroke-dasharray和stroke-dashoffset。

借鉴解释:

  • stroke-miterlimit 表示描边相交(锐角)的呈现形式。暗中同意大小是4. 什么斜角转斜面包车型客车角度损耗之类的意味,值越大,损耗越小。具体干嘛的,笔者自身也不显著。大家可查证其余资料。
  • stroke-dasharray 表示虚线描边。可选值为:none<dasharray>inherit. 其中,none意味着不是虚线;<dasharray>为多少个逗号或空格分隔的数值列表。表示各种虚线端的长度。能够是固定的尺寸值,也得以是百分比率;inherit表继承。
  • stroke-dashoffset 表示虚线的伊始偏移。可选值为:<percentage><length>inherit. 百分比率,长度值,承继。
  • stroke-opacity 表示描边光滑度。私下认可是1.

特意佩性格很顽强在山高水险或巨大压力面前不屈小编列举的贰个活跃形象的事例:

黄金年代根火朣肠12毫米,要在上头画虚线,虚线间隔有15分米,若无dashoffset,则火朣肠前面15分米会被豆瓣酱覆盖!实际上独有12毫米,由此,大家来看的是全部火朣肠都有花生酱。未来,dashoffset也是15毫米,也正是虚线要今后偏移15分米,结果,香辣酱要抹在火朣肠之外,也便是火朣肠上怎样麻辣酱也并未有。倘诺换到上面的直线SVG,约等于直线看不见了。大家把dashoffset值渐渐变小,则会发觉,火朣肠上的黄豆酱一点一点冒出了,好像蒜末从火朣肠根部涂抹上去相近。

 

<style type="text/css">
body{
background-color: #00688B;
}
.text{
font-size: 64px;
font-weight: normal;
text-transform: uppercase;

fill:none;
stroke: #B0E0E6;
stroke-width: 2px;
/stroke-dasharray: 90 310;

animation: stroke 6s infinite linear;
}

.text-1{
stroke: #FFEC8B;
animation-delay:-1.5s;
text-shadow:5px 5px 5px #FFEC8B;
}
.text-2{
stroke:#AEEEEE;
animation-delay:-3s;
text-shadow:5px 5px 5px #7FFFD4;
}
.text-3{
stroke:#EEE0E5;
animation-delay:-4.5s;
text-shadow:5px 5px 5px #7FFFD4;
}
.text-4{
stroke:#FFC1C1;
animation-delay:-6s;
text-shadow:5px 5px 5px #7FFFD4;
}
@keyframes stroke {
to {
stroke-dashoffset: -400;
}
}

</style>

<svg width="100%" height="100">
<text text-anchor="middle" x="50%" y="50%" class="text text-1" >
Happy birthday to you❤
</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2" >
Happy birthday to you❤
</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3" >
Happy birthday to you❤
</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4" >
Happy birthday to you❤
</text>
</svg>

 

只须求用到svg里面的描边(stroke)和填充(fill)就足以高达。数值各个草样调节和测量试验有悲喜!✿✿ヽ(°▽°)ノ✿

放上一些SVG基础知识的链接以供大家参谋:

 

大巴上逛segmentfault见到生机勃勃篇用纯css和SVG来落到实处的超级赞的职能,感到拿来做一些开场效果动画应该正确。 最早的文章地址...

依赖调换的消除方案


那么些方案从HTML的角度来讲是最棒的:它只要求一个因素,其余的都能够用伪成分、转换和CSS渐变实现。我们从上边那么些轻松的成分以前:

<div class="pie"></div>

1
<div class="pie"></div>

以后,如若大家盼望展现二个 肆分三 比例的饼图。灵活性的难题我们后边再消除。我们先给成分加多样式,让它成为贰个圆,也正是我们的背景:

图片 18

图1:第一步是先画三个圆(可能能够说是展现0%比重的饼图)

CSS

.pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; }

1
2
3
4
5
.pie {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: yellowgreen;
}

 

大家的饼图是黄铜色(特指 yellowgreen )和玉绿( #655 )展现的比例。恐怕会在比例部分尝试使用 transform 中的 skew ,可是通过一遍试验之后注脚,那是三个百般混乱的方案。由此,大家用那三种颜色为这些饼图的左右部分各自着色,然后对于大家想要的百分比,使用旋转的伪成分来落实。

我们应用一个简短的线性渐变,给右半部分着淡白紫:

CSS

background-image: linear-gradient(to right, transparent 50%, #655 0);

1
background-image: linear-gradient(to right, transparent 50%, #655 0);

图片 19

图2:用三个归纳的线性渐变给右半圆着淡紫灰

如图2所示,这样就完事了。今后,大家能够继续为伪成分增加样式,让它造成叁个蒙版:

CSS

.pie::before { content: ''; display: block; margin-left: 50%; height: 100%; }

1
2
3
4
5
6
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
}

图片 20

图3:虚线内的从头到尾的经过表示伪成分将用作蒙版的区域

您能够在图3中来看大家的伪成分当前稳固相对于咱们的pie成分。方今,它还并未有拉长样式,也绝非隐蔽任何事物,只是叁个晶莹剔透的矩形。在始发增添样式早先,大家先来解析一下:

  • 因为我们意在它覆盖圆的红洋红部分,大家须求给它应用多个深黑的背景,使用 background-color: inherit 来防止再度定义,因为大家当然就巴望它和父成分的背景颜色保持一致。
  • 大家期待它绕着圆的为主点旋转,中央点在伪成分的左边,所以大家须要给它的 transform-origin ,应用一个0 八分之四 ,也许是一直一个 left 。
  • 我们不想要它是叁个矩形,因为它会超过饼图的边缘,所以大家供给给 .pie 应用 overflow: hidden ,大概是贰个老少咸宜的 border-radius 让它成为三个半圆。

综述,伪成分的CSS样式如下:

CSS

.pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; }

1
2
3
4
5
6
7
8
9
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
}

图片 21

图4:加多样式之后的伪成分(这里用虚线表示)

留意:不要使用 class="crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;"> class="crayon-pre crayon-code" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> class="crayon-e">background class="crayon-sy">: class="crayon-i">inherit class="crayon-sy">; ,要用 id="crayon-5b8f6c8720464547585400" class="crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;"> class="crayon-pre crayon-code" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> class="crayon-e">background-color class="crayon-sy">: class="crayon-i">inherit ;,不然父成分背景图像上的渐变也会被三番一回

笔者们的饼图近期如图4所示。今后开端风趣起来了!大家能够初阶转动伪成分,给它选择三个rotate() 转变。要展现 33.33% 的比例,大家得以给它二个 72deg ( 0.2 x 360 = 72 ),或 .2turn ,这一个可读性更加好。你能够在图5中见到区别旋转角度值的结果。

图片 22

图5:分别显示分化期比较例的饼图,从左到右: 百分之十  ( 36deg 或 .1turn ), 四分之三  ( 72deg 或  .2turn ), 二成  ( 144deg  或 .4turn )

您或者会想大家早就成功了,不过它可没那样轻便。大家的饼图在展示050%的轻重的剧情时是从未有过其他难点的,不过假设大家要描绘多少个百分之三十二 的旋转(通过动用 .6turn ),就能够时有爆发如图6的状态。可是,别忧郁,大家得以缓慢解决这么些工作!

图片 23

图6:对于超过二分一的比例,大家的饼图就跪了orz(这里的是四分之一)

倘诺大家把 百分之二十-百分之百 比例的情事作为单身的一个主题材料,恐怕会当心到可以利用以前的减轻方案的反相版本:从0.5turn旋转的红深草绿伪成分。所以,对于叁个60%的饼图,伪成分的CSS代码如下:

CSS

.pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background: #655; transform-origin: left; transform: rotate(.1turn); }

1
2
3
4
5
6
7
8
9
10
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background: #655;
  transform-origin: left;
  transform: rotate(.1turn);
}

图片 24

图7: 五分之二 饼图的对的张开药形式~

你能够在图7中看看结果。因为我们早就制订了三个能够描绘出任何百分比的格局,大家居然足感到饼图从0%100%增加动画功效,成立出贰个诙谐的进程条:

CSS

@keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #655; } } .pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 3s linear infinite, bg 6s step-end infinite; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@keyframes spin {
  to { transform: rotate(.5turn); }
}
 
@keyframes bg {
  50% { background: #655; }
}
 
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 3s linear infinite,
             bg 6s step-end infinite;
}

 

See the Pen zGbNLJ by Airen (@airen) on CodePen.

呈现没失常,但是大家只要给多少个区别期比较例的静态饼图增添样式呢,最遍布的用例是?在地道图景下,我们目的在于得以省略地输入如下的内容:

<div class="pie">20%</div> <div class="pie">60%</div>

1
2
<div class="pie">20%</div>
<div class="pie">60%</div>

下一场就足以拿走多个饼图,多少个表示20%,贰个代表60%。首先,大家先研商一下哪些运用内联样式来变成,然后大家得以写三个简便的剧本来解析文本内容,对应地丰盛内联样式,况且要代码文雅、封装、可维护性,还只怕有最要害的有些,可访谈性。

采纳内联样式调控饼图百分比的三个劳碌是:用于安装百分比CSS代码是用伪成分实现的。况且你也知晓,我们不可能给伪成分设置内联样式,所以咱们要求创新。

只顾:假让你想要使用的值是在有个别无需经过重新的复杂性的计量的节制内的事态,你能够利用相近的手艺,包罗经过它们一步一步调节和测量试验动画的状态。看该技能的贰个简单易行的演示。

 

See the Pen YXgNOK by Airen (@airen) on CodePen.

缓慢解决方案来自最不容许之处之生龙活虎。大家就要利用大家曾经介绍过的卡通,可是它是行车制动器踏板状态的。大家不会让它像多少个正规的卡通片那样运维,大家将采取负延迟来让它能够静态地暂停在某些点。很意外?一个负的animation-delay的值不止在规范中是允许的,在相近那样的案例中也是非常好用:

负延迟是平价的。和0s的延迟相仿,它代表动画将马上实践,不过是依据延迟的相对化值来自动运营的,所以只要动画已经在内定的时光在此以前就初阶运维了,那它就能一向从active的年华北途运营。 —CSS Animations Level 1

因为大家的动画是脚刹踏板的,它的首先帧正是大家唯意气风发体现的那后生可畏帧(通过大家的animation-delay概念)。饼图上出示的百分比将会是大家的animation-delay的总时间。举例,当前的持续时间是6s,我们的 animation-delay 值为-1.2s则显示20%的比例。为了简化总计,大家设置贰个100s的持续时间。记住因为大家的动画片是长久暂停的,我们给它钦赐的延迟大小并不会有啥样影响。

再有最后多个标题:动画是赋给伪成分的,不过我们想要给.pie要素设置内联样式。因为<div>上向来不动画,大家得以给它设置animation-delay作为内联样式,然后给伪成分应用 animation-delay: inherit; 。一言以蔽之,20%60%的饼图的HTML代码如下:

<div class="pie" style="animation-delay: -20s"></div> <div class="pie" style="animation-delay: -60s"></div>

1
2
<div class="pie" style="animation-delay: -20s"></div>
<div class="pie" style="animation-delay: -60s"></div>

刚巧建议的这些动画的CSS代码如下(省略 .pie 准绳,因为从没订正):

CSS

@keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #655; } } .pie::before { /* [Rest of styling stays the same] */ animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes spin {
  to { transform: rotate(.5turn); }
}
 
@keyframes bg {
  50% { background: #655; }
}
 
.pie::before {
  /* [Rest of styling stays the same] */
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

此刻,能够把HTML标签改成选择比例作为内容,和一方始期望的均等,然后经过一个轻松的剧本为其增添animation-delay 内联样式。

JavaScript

$$('.pie').forEach(function(pie) { var p = parseFloat(pie.textContent); pie.style.animationDelay = '-' p 's'; });

1
2
3
4
$$('.pie').forEach(function(pie) {
  var p = parseFloat(pie.textContent);
  pie.style.animationDelay = '-' p 's';
});

图片 25

图8:没有遮盖文本前的图

  • 把饼图的height转移成 line-height (或加多二个和height值非常的line-height,可是那值是毫无意义的再次代码,因为line-height会活动总括height的值)。
  • 通过相对定位给伪成分设置大小和地方,那样它不会把公文挤下去。
  • 增进 text-align: center; 让文本水平居中。

末尾的代码如下:

CSS

.pie { position: relative; width: 100px; line-height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); color: transparent; text-align: center; } @keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #655; } } .pie::before { content: ''; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.pie {
  position: relative;
  width: 100px;
  line-height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, #655 0);
  color: transparent;
  text-align: center;
}
 
@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #655; }
}
 
.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

 

See the Pen qdvRMv by Airen (@airen) on CodePen.

The problem

饼图,四处可知,可是真的去落到实处,仍旧要下点武术的。
比如大家要开创叁个速度提示器,也许计时显示器,平常涉及动用外部图像编辑器为饼图的几个值成立图像,或利用js脚本设计更是复杂的图样。

到现在有其余更加好的法子去落到实处。

据说SVG的应用方案


SVG使得众多图形职业变得尤其简约,饼图也不例外。不过,用path渠道创造饼图,须求复杂的数学总括,大家得以接收一些小技能来代替。

笔者们从一个圆初始:

<svg width="100" height="100"> <circle r="30" cx="50" cy="50" /> </svg>

1
2
3
<svg width="100" height="100">
<circle r="30" cx="50" cy="50" />
</svg>

近期,给它利用有的基础的体制:

CSS

circle { fill: yellowgreen; stroke: #655; stroke-width: 30; }

1
2
3
4
5
circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 30;
}

注意:你只怕清楚,那些CSS属性也能够当做SVG成分的天性使用,要是把可移植性思虑在内的话那或许挺平价的。

图片 26

图9:从一个浅豆绿的SVG圆形,带二个胖胖的#655描边起始

你能够在图9中观望大家绘制的加了描边的圆。SVG描边不仅只有strokestroke-width属性。还应该有为数不菲不是特意流行的描边相关的个性能够用于对描边举办微调。此中三个是stroke-dasharray,用于创建虚线描边。比方,大家能够运用如下:

CSS

stroke-dasharray: 20 10;

1
stroke-dasharray: 20 10;

图片 27

图10:三个简单易行的虚线描边,通过stroke-dasharray性情创立

这行代码的意思是大家的虚线是20的尺寸加上10的边距,如图10所示。在这里处,你恐怕会高兴那么些SVG描边属性和饼图究竟有怎么样关系啊。假设大家给描边应用三个值为0的虚线宽度,和一个高于或等于大家眼下圆的周长的边距,它可能就明明白白一些了(计算周长: C = 2πr , 所以在这里处  C = 2π × 30 ≈ 189 ):

CSS

stroke-dasharray: 0 189;

1
stroke-dasharray: 0 189;

图片 28

图11:不同stroke-dasharray值对应的功力;从左到右: 0 189; 40 189; 95 189; 150 189 

如图1第11中学的第三个圆所示,它的描边的都被移除了,只剩余三个海洋蓝的圆。但是,当大家带头增大第一个值的时候,遗闻体产生了(图11):因为边距太长,大家就一贯不虚线描边了,唯有三个描边覆盖了我们钦赐的圆的周长的比例。

你恐怕曾经起来弄了解了那是怎么回事:若是大家把圆的半径减小到早晚程度,它或者就能够全盘被它的描边覆盖,最后取得的是二个十一分接近于饼图的东西。举个例子,你能够在图1第22中学观看:当给圆应用二个25的半径和三个50stroke-width,像上边包车型地铁作用:

图片 29

图12:我们的SVG图像初始像贰个饼图了O(∩_∩)O

纪事:SVG描边总是相对于成分边缘一半在内八分之四在外的(居中的)。现在应有能够调控这一表现。

<svg width="100" height="100"> <circle r="25" cx="50" cy="50" /> </svg> circle { fill: yellowgreen; stroke: #655; stroke-width: 50; stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */ }

1
2
3
4
5
6
7
8
9
10
<svg width="100" height="100">
  <circle r="25" cx="50" cy="50" />
</svg>
 
circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 50;
  stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */
}

当今,把它成为大家在上三个技术方案中创设的饼图的范例是极其轻便的:大家只须要在描边下边增添三个越来越大的煤黑圆形,然后逆时针转动90°,那样它的源点就在顶端中间。因为<svg>要素也是HTML成分,大家得以给它助长样式:

CSS

svg { transform: rotate(-90deg); background: yellowgreen; border-radius: 50%; }

1
2
3
4
5
svg {
  transform: rotate(-90deg);
  background: yellowgreen;
  border-radius: 50%;
}

图片 30

图13:最后的SVG饼图

你能够在图第13中学看到最终结出。这种本领能够让饼图更易于实现从0%100%变化的卡通。我们只须要创设一个CSS动画,让stroke-dasharray从 0 158 变成 158 158 :

CSS

@keyframes fillup { to { stroke-dasharray: 158 158; } } circle { fill: yellowgreen; stroke: #655; stroke-width: 50; stroke-dasharray: 0 158; animation: fillup 5s linear infinite; }

1
2
3
4
5
6
7
8
9
10
11
@keyframes fillup {
  to { stroke-dasharray: 158 158; }
}
 
circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 50;
  stroke-dasharray: 0 158;
  animation: fillup 5s linear infinite;
}

用作贰个十分的修正,我们得以在圆上钦点多少个特定半径,使其周长Infiniti临近100,那样我们能够用百分比内定stroke-dasharray的尺寸,而无需做计算。因为周长是2πr,我们的半径则是100 ÷ 2π ≈ 15.915494309,约等于16。我们还足以用viewBox特色钦命SVG的尺码,能够让它自动调整为容器的大小,不要选拔widthheight属性。

通过以上调解,图13的饼图的HTML标签如下:

<svg viewBox="0 0 32 32"> <circle r="16" cx="16" cy="16" /> </svg>

1
2
3
<svg viewBox="0 0 32 32">
  <circle r="16" cx="16" cy="16" />
</svg>

CSS如下:

CSS

svg { width: 100px; height: 100px; transform: rotate(-90deg); background: yellowgreen; border-radius: 50%; } circle { fill: yellowgreen; stroke: #655; stroke-width: 32; stroke-dasharray: 38 100; /* for 38% */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
svg {
  width: 100px; height: 100px;
  transform: rotate(-90deg);
  background: yellowgreen;
  border-radius: 50%;
}
 
circle {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 32;
  stroke-dasharray: 38 100; /* for 38% */
}

瞩目现行反革命比例已经得以很实惠地改成了。当然,固然已经简化了标签,大家如故不想在绘制每一种饼图的时候都重复一次全数那些SVG标签。那是时候拿出JavaScript来帮大家意气风发把了。我们写三个粗略的本子,让大家的HTML标签直接省略地那样写:

<div class="pie">20%</div> <div class="pie">60%</div>

1
2
<div class="pie">20%</div>
<div class="pie">60%</div>

然后在各种.pie要素里边增多三个内联SVG,包涵具备供给的因素和总体性。它还有恐怕会加多贰个<title>要素,为了充实可访谈性,那样显示器阅读器客商还足以驾驭当前的饼图表示的比重。最终的本子如下:

JavaScript

$$('.pie').forEach(function(pie) { var p = parseFloat(pie.textContent); var NS = ""; var svg = document.createElementNS(NS, "svg"); var circle = document.createElementNS(NS, "circle"); var title = document.createElementNS(NS, "title"); circle.setAttribute("r", 16); circle.setAttribute("cx", 16); circle.setAttribute("cy", 16); circle.setAttribute("stroke-dasharray", p " 100"); svg.setAttribute("viewBox", "0 0 32 32"); title.textContent = pie.textContent; pie.textContent = ''; svg.appendChild(title); svg.appendChild(circle); pie.appendChild(svg); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$$('.pie').forEach(function(pie) {
  var p = parseFloat(pie.textContent);
  var NS = "http://www.w3.org/2000/svg";
  var svg = document.createElementNS(NS, "svg");
  var circle = document.createElementNS(NS, "circle");
  var title = document.createElementNS(NS, "title");
  circle.setAttribute("r", 16);
  circle.setAttribute("cx", 16);
  circle.setAttribute("cy", 16);
  circle.setAttribute("stroke-dasharray", p " 100");
  svg.setAttribute("viewBox", "0 0 32 32");
  title.textContent = pie.textContent;
  pie.textContent = '';
  svg.appendChild(title);
  svg.appendChild(circle);
  pie.appendChild(svg);
});

正是它了!你大概会认为CSS方法相比较好,因为它的代码比较轻松何况更可信赖。但是,SVG方法相比较纯CSS方案也许有一定的优势的:

  • 可以特别轻松地丰硕第三种颜色:只需求增多另多少个描边圆,然后使用stroke-dashoffset安装它的描边属性。然后,将它的描边长度增添到下方的圆的描边长度上。假使是眼下那么些CSS的方案,你要哪些给饼图增多第三种颜色吗?
  • 我们不须要思量打字与印刷的标题,因为SVG元素就像<img>要素相符,被默感到是内容的一部分,打印完全没失常。第意气风发种方案决意于背景,所以不会被打字与印刷。
  • 作者们能够采用内联样式改动颜色,也便是说我们能够通过脚本就一贯改换颜色(如,依据顾客输入改变颜色)。第生龙活虎种方案重视于伪成分,除了通过一而再,它并未此外情势能够增加内联样式,那非常不便利。

See the Pen oXVBar by Airen (@airen) on CodePen.

transform solution

先是,大家来画叁个圆:

<pre>
.pie {
width: 100 px;
height: 100 px;
border-radius: 50 %;
background: yellowgreen;
}
</pre>

图片 31

既是是饼图,例如双色饼图,就必要另风流倜傥种颜色来展现速度,再画二个半圆:

能够用渐变来做:

background-image: linear-gradient(to right, transparent 50%, #655 0);

图片 32

大家还索要创设一个遮罩层:虚线部分。

<pre>
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
}
</pre>

创制好了,不过有几点要专心之处:

  • 因为大家想让这些层盖住莲红的有些,所以大家能够给它加个玛瑙红的背景,也足以用
    <pre>
    background-color: inherit;
    </pre>来幸免重新评释。

  • 旋转的大旨点是圆心,大家能够如此评释:
    <pre>
    transform-origin: left;
    //或者
    transform-origin: 0 50%;
    </pre>

  • 大家创制遮罩层的指标是盖住品绿的那部分,它需要是个半圆,可是大家前不久写的是个矩形,所认为了制止侧漏,大家用border-radius 让它也成为半圆:

<pre>
border-radius: 0 100% 100% 0 / 50%;
</pre>

遮罩层也就就绪了,今后给三个转悠角度省视:

<pre>
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: #655;
transform-origin: left;
transform: rotate(.1turn);
}
</pre>

图片 33

旋转36度

近日加点动画让它动起来:

<pre>
@keyframes spin {
to {
transform: rotate(.5turn)
}
}

@keyframes bg {
50% {
background: #655
}
}

.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0/50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite,bg 6s step-end infinite
}

</pre>

点击查看:
http://dabblet.com/gist/722909b9808c14eb7300

几方今首先步好了,更进一竿,想想,假设大家在html中定义百分数,就能够显示相应的比重,那差少之甚少是无法越来越好了。
就疑似那样定义:
<pre>
<div class="pie">20%</div>
<div class="pie">60%</div>
</pre>

图片 34

就像那样

三个显示十分之二,另贰个显得四分三 .

率先,大家试试能否用行内样式,然后用生机勃勃段脚本去深入分析。

回头想大器晚成想:大家是要调整伪成分的团团转度数来显示百分比的,那难点来了(开采机手艺哪家强。。XD),大家无助直接给伪成分增多行内样式...咋做吧?

The solution comes from one of the most unlikely places.

作者们刚刚定义了动画片,现在它该停停了。

咱俩将应用animation的delay 来落实,与正常的施用区别的是,大家将利用负数 让它停在大家定义的岗位。很吸引是或不是,animation-delay 的参数为负数,那是不适合标准的,然则在少数景况下,它是很有用的,看描述:

“A negative delay is valid. Similar to a delay of 0s, it means that the ani-mation executes immediately, but is automatically progressed by the ab-solute value of the delay, as if the animation had started the specifiedtime in the past, and so it appears to start partway through its activeduration.”
— CSS Animations Level 1 (w3.org/TR/css-animations/#animation-delay)

因为动画被定义为pause 的时候,只会显得第后生可畏帧。

当时,彰显在饼图上的比重正是我们定义的延迟时间占整体动画时间的比例。

比方,大家的卡通持续时间是6s, 延迟时间是-1.2s, 就能来得 十分之六 ;
为了看起来方便,大家定义整个动画的持续时间为100s。

因为动画是稳步的,所以设置多大的延期是不会有其它影响的。

事例走起:

<pre>
<div class="pie" style="animation-delay: -20s"></div>
<div class="pie" style="animation-delay: -60s"></div>
</pre>

CSS 规则:
<pre>
@keyframes spin {
to {
transform: rotate(.5turn);
}
}

@keyframes bg {
50% {
background: #655;
}
}

.pie::before {
/* [Rest of styling stays the same] */
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
</pre>

<pre>
$$('.pie').forEach(function(pie) {
var p = pie.textContent;
pie.style.animationDelay = '-' parseFloat(p) 's';
});
</pre>

图片 35

咱俩不久前不想见见那几个比重,怎么做呢?

<pre>
color: transparent;
</pre>

这么字体就看不到了,但是仍是可以选杏月打字与印刷的。
除此以外,大家得以让那一个百分比居中,幸免它被入选时,出以往别之处。

几点注意之处:

  • 为了落实垂直居中,大家能够:

<pre>
height:100px;
line-height:100px;
</pre>

不过如此的代码是再度的,只写line-height 就好。

Convert height to line-height (or add a line-height equal to the height, but that’s pointless code duplication, because line- height would set the computed height to that as well ).

  • 给伪成分 相对定位,幸免字飞出去。
  • text-align:center; 完毕程度居中。

最后的代码是这么的:

<pre>

.pie {
opacity: 1;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellowgreen;
background-image: linear-gradient(to right ,transparent 50% , #655 0);
}

@keyframes spin {
to {
transform: rotate(.5turn);
}
}

@keyframes bg {
50% {
background: #655;
}
}

.pie::before {
/* [Rest of styling stays the same] */
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
</pre>

在线查看:http://scaukk.github.io/css/static_pie_chart.html

自然,还足以用svg 达成,篇幅有限,这里就背着了。


题外话:

那是张鑫旭 在此之前做的 摊鸡蛋饼 动画 XD
http://www.zhangxinxu.com/wordpress/2014/04/css3-pie-loading-waiting-animation/

既是 饼图作者都写好了,干脆写点动画,也摊个鸡蛋饼。
原理大致,有意思味的能够看看。
会见地址:

http://scaukk.github.io/css/pie.html


正文内容大概就这么多,迎接调换,款待举报,如有错误,还请改正,多谢阅读。

有关能源


  • CSS Transforms
  • CSS Image Values
  • CSS Backgrounds & Borders
  • Scalable Vector Graphics
  • CSS Image Values Level 4

以后的饼图


星型渐变在那间也足以丰富有帮扶。它只必要一个圆变成分,以至富含多少个色标的锥形渐变就可以做出饼图。举例,图5中象征五分一的饼图能够如此成功:

图片 36

CSS

.pie { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#655 40%, yellowgreen 0); }

1
2
3
4
5
.pie {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: conic-gradient(#655 40%, yellowgreen 0);
}

还有,一旦CSS Values Level 3中定义的attr()函数更新后被分布应用,你就可以用简易的HTML属性来支配百分比了:

CSS

background: conic-gradient(#655 attr(data-value %), yellowgreen 0);

1
background: conic-gradient(#655 attr(data-value %), yellowgreen 0);

要增添第三种颜色也特别轻巧。比如,对于地点展现的饼图,大家只须要再追加多个色标:

CSS

background: conic-gradient(deeppink 20%, #fb3 0, #fb3 30%, yellowgreen 0);

1
background: conic-gradient(deeppink 20%, #fb3 0, #fb3 30%, yellowgreen 0);

:多亏了Lea的锥形渐变polyfill,我们今后才足以利用锥形渐变,在他的SmashingConf解说甘休不久过后公布的。那只怕正是你以往用CSS来规划饼图的点子!这里的三种艺术你会利用什么哪一种,以至为什么那样做?或许您早已想到了三个通通不一样的化解方案?请在口无遮拦中留言~

1 赞 2 收藏 评论

图片 37

本文由pc28.am发布于前端技术,转载请注明出处:SVG霓虹灯效果,用CSS和SVG制作饼图

上一篇:clear通俗讲解,通俗讲解 下一篇:没有了
猜你喜欢
热门排行
精彩图文