小贝子编程

CSS3简单甜甜圈图



我想做的是创建一个简单的圆环图。我目前只使用CSS（3），但我不知道没有javascript是否可行。

到目前为止我所拥有的：http://jsfiddle.net/aBP5Q/

HTML:

<div class="donut-container" style="background: #9C0;">
    <div class="donut-inner">
        <div class="donut-label">HTML</div>
    </div>
</div>

CSS：

.donut-container {
    width: 150px;
    height: 150px;
    float: left;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
    margin-right: 20px;
}
.donut-inner {
    width: 134px;
    height: 134px;
    position: relative;
    top: 8px;
    left: 8px;
    background: #FFF;
    -webkit-border-radius: 65px;
    -moz-border-radius: 65px;
    border-radius: 65px;
}
.donut-label {
    line-height: 130px;
    text-align: center;
    font-size: 20px;
}

我想展示绿色和蓝色作为主题。所以没有绿色是0%，全绿色（360度）是100%。如果可能的话，甚至可以在加载图表时使用简单的动画。

非常感谢你的帮助。

SVG获胜！

.item {
    position: relative;
    float: left;
}
.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}
svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}
.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}
.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}
@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
  }
}
@keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}
@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}
@keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}
<div class="item html">
    <h2>HTML</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>
<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>

JSFiddle版本

以下是评论中要求的带有背景圆圈的版本：

.item {
    position: relative;
    float: left;
}
.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}
svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}
.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}
.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}
@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
  }
}
@keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}
@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}
@keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}
<div class="item html">
    <h2>HTML</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#f2f2f2" fill="none"/>
      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>
<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#f2f2f2" fill="none"/>
      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>

它是如何工作的

stroke-dasharray用于定义虚线使用的"模式"（MDN）。通过提供一个值，您可以创建一个破折号为440px、空格为440px的图案。（440px大约是圆的周长）。

CCD_ 2有效地移动了虚线图案（MDN）的起始点。

220的dash-offset（stroke-dasharray的一半）将产生半圆。110=四分之一圆等

这个答案之所以可能，是因为Turnip的答案，但我做了一些重大更改，我将解释它是如何工作的：

.donutContainer {
    position: relative;
    float: left;
}
.donutContainer h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}
svg {
    transform: rotate(-90deg);
}
.donut {
  stroke-dasharray: 440;
  -webkit-animation: donut 1s ease-out forwards;
  animation: donut 1s ease-out forwards;
}
@-webkit-keyframes donut {
  from {
    stroke-dashoffset: 440;
  }
}
@keyframes donut {
  from {
    stroke-dashoffset: 440;
  }
}
<div class="donutContainer">
    <h2>donut</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" style="stroke-dashoffset: 160;/* 160 of 440 */" class="donut" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>
<div class="donutContainer">
    <h2>donut 2</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" style="stroke-dashoffset: 220;/* 220 of 440 */" class="donut" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#FEC007" fill="none"/>
     </g>
    </svg>
</div>

因为动画使用from而不是to来创建动画，所以不支持动画的浏览器将显示完整的圆环图，而不是完全不显示。这也使得只使用内联CSS就可以更改圆环图的彩色部分，并且相同的单个CSS动画可以适用于任何数量的圆环图。

svg物质的解释：

stroke-dasharray：在这种情况下，基本上是圆的总周长。

stroke-dashoffset：圆圈中着色的部分。零（0）表示所有着色在（100%）中，440（或您设置的周长）表示没有着色在（0%）中

circle元素的属性：

r：圆的半径

CCD_ 12："；中心X"；。圆心（svg元素左下角的X坐标）

CCD_ 14："；中心Y"；。圆心（svg元素左下角的Y坐标）

stroke-width：绘制圆环的笔划宽度

stroke：甜甜圈的颜色

我写了这篇评论回复，但太长了：

嗯。。。哦，这是第二圈的小提琴http://jsfiddle.net/LgtV2/。。。。它有三个馅饼部分。第一个圆（100%）有5个部分。你应该掌握它的工作原理，这样你就可以复制它了。我以前从来没有这样做过，我只是在看San发布的链接，但它看起来只是使用了多个Div和css3TRANSFORM来形成曲线，以及用于动画的伪选择器：before和：after。动画在加载页面时发生。。。例如：在加载div1之前，它有一个5的变换，它加载并有一个8的变换，：在加载之后，它有11的变换。

代码：

<div class="half_pie">
    <div class="half_part_pie_one half_bar_color half_percentage" data-percentage="35"></div>
    <div class="half_part_pie_two"></div>
    <div class="half_part_pie_three"></div> <span class="half_pie_icon iconfont-android"></span>
</div>
/*percentage STEPS (do not touch)*/
 .full_percentage[data-percentage="100"] {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.full_percentage[data-percentage="95"] {
    -webkit-transform: rotate(170deg);
    -moz-transform: rotate(170deg);
    -o-transform: rotate(170deg);
    transform: rotate(170deg);
}
.full_percentage[data-percentage="90"] {
    -webkit-transform: rotate(155deg);
    -moz-transform: rotate(155deg);
    -o-transform: rotate(155deg);
    transform: rotate(155deg);
}
.full_percentage[data-percentage="85"] {
    -webkit-transform: rotate(125deg);
    -moz-transform: rotate(125deg);
    -o-transform: rotate(125deg);
    transform: rotate(125deg);
}
.full_percentage[data-percentage="80"] {
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    transform: rotate(110deg);
}
.full_percentage[data-percentage="75"] {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.full_percentage[data-percentage="70"] {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
}
.full_percentage[data-percentage="65"] {
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    transform: rotate(55deg);
}
.full_percentage[data-percentage="60"] {
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.full_percentage[data-percentage="55"] {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
}
.full_percentage[data-percentage="50"] {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.half_percentage[data-percentage="50"] {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.half_percentage[data-percentage="45"] {
    -webkit-transform: rotate(170deg);
    -moz-transform: rotate(170deg);
    -o-transform: rotate(170deg);
    transform: rotate(170deg);
}
.half_percentage[data-percentage="40"] {
    -webkit-transform: rotate(155deg);
    -moz-transform: rotate(155deg);
    -o-transform: rotate(155deg);
    transform: rotate(155deg);
}
.half_percentage[data-percentage="35"] {
    -webkit-transform: rotate(125deg);
    -moz-transform: rotate(125deg);
    -o-transform: rotate(125deg);
    transform: rotate(125deg);
}
.half_percentage[data-percentage="30"] {
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    transform: rotate(110deg);
}
.half_percentage[data-percentage="25"] {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.half_percentage[data-percentage="20"] {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
}
.half_percentage[data-percentage="15"] {
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    transform: rotate(55deg);
}
.half_percentage[data-percentage="10"] {
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.half_percentage[data-percentage="5"] {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
}
.half_percentage[data-percentage="0"] {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
/*
 *
 * THE SECOND EXAMPLE
 * the second example for a max percentuage of 50% in this case
 *
 */
/*COLOR and STYLES (note: you can use gradients for the class full_bar_color)*/
 .half_bar_color {
    background: #3498db;
}
/*start chart pie code*/
 .half_pie {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
/*the background white circular color*/
 .half_pie:before {
    content:'';
    display: block;
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 220px;
    top: -10px;
    left: -10px;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
/*color white #fff to fix the rendering problem*/
 .half_pie:after {
    content:'';
    display: block;
    position: absolute;
    z-index: 10;
    width: 198px;
    height: 198px;
    top: 1px;
    left: 1px;
    -webkit-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
/*the icon*/
 span.half_pie_icon {
    position: absolute;
    z-index: 5;
    top: 25px;
    left: 25px;
    width: 150px;
    height: 150px;
    font-size: 3em;
    line-height: 150px;
    text-align: center;
    color: #e0e0e0;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
/*ONE*/
 .half_part_pie_one {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    clip: rect(0px 100px 200px 0px);
}
/*TWO*/
 .half_part_pie_two {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    clip: rect(0px 100px 200px 0px);
}
/*THREE*/
 .half_part_pie_three {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    clip: rect(0px 200px 200px 100px);
    -webkit-animation: half_third 4s linear;
    -moz-animation: half_third 4s linear;
    -o-animation: half_third 4s linear;
    animation: half_third 4s linear;
    opacity: 0;
}
/*THIRD animation*/
 @-webkit-keyframes half_third {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: rotate(180deg);
    }
}
@-moz-keyframes half_third {
    0% {
        opacity: 1;
        -moz-transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        -moz-transform: rotate(180deg);
    }
}
@-o-keyframes half_third {
    0% {
        opacity: 1;
        -o-transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        -o-transform: rotate(180deg);
    }
}
@keyframes half_third {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: rotate(180deg);
    }
}

我修改了在网上找到的一个片段，只使用HTML和CSS制作了一个简单的甜甜圈图，结果是：

.block {
  margin: 25px 25px 0 0;
  background: #394264;
  border-radius: 5px;
  float: left;
  width: 300px;
  overflow: hidden;
}
.donut-chart-block {
  overflow: hidden;
}
.donut-chart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 2rem auto;
  border-radius: 100%
}
.donut-chart .center {
  background: #394264;
  position: absolute;
  top: 30px;
  left: 30px;
  height: 140px;
  width: 140px;
  border-radius: 70px;
}
.clip {
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
  height: 100%;
  position: absolute;
  width: 100%;
}
.item {
  border-radius: 50%;
  clip: rect(0px, 100px, 200px, 0px);
  height: 100%;
  position: absolute;
  width: 100%;
  font-family: monospace;
  font-size: 1.5rem;
}
#section1 {
  transform: rotate(0deg);
}
#section1 .item {
  background-color: #E64C65;
  transform: rotate(76deg);
}
#section2 {
  transform: rotate(76deg);
}
#section2 .item {
  background-color: #11A8AB;
  transform: rotate(140deg);
}
#section3 {
  transform: rotate(215deg);
}
#section3 .item {
  background-color: #4FC4F6;
  transform: rotate(113deg);
}
#section4 {
  transform: rotate(-32deg);
}
#section4 .item {
  background-color: #FCB150;
  transform: rotate(32deg);
}
<div class="container">
  <div class="donut-chart-block block">
    <div class="donut-chart">
      <div id="section1" class="clip">
        <div class="item" data-rel="21"></div>
      </div>
      <div id="section2" class="clip">
        <div class="item" data-rel="39"></div>
      </div>
      <div id="section3" class="clip">
        <div class="item" data-rel="31"></div>
      </div>
      <div id="section4" class="clip">
        <div class="item" data-rel="9"></div>
      </div>
      <div class="center"></div>
    </div>
  </div>
</div>

决定将其作为其他答案的替代方案发布在此处。干杯

如果您需要创建一个圆环图动画（仅为纯css），并且还需要多种颜色，请检查我创建的代码笔示例。

http://codepen.io/hilar47/pen/RprXev

<div class="container">
  <div class="donut-chart-block block"> 
    <div class="donut-chart">
        <div id="part1" class="portion-block"><div class="circle"></div></div>
        <div id="part2" class="portion-block"><div class="circle"></div></div>
        <div id="part3" class="portion-block"><div class="circle"></div></div>
        <p class="center"></p>        
    </div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium