可扩展的css百分比环

时间：2015-01-11 22:11:00

标签： javascript html css css3 css-shapes

我试图将下面的代码转换为可扩展的版本，我尝试过使用vw和vh，％值等等，我似乎无法获得正确的价值平衡哪个工作。任何帮助表示赞赏。

此codepen也可能有所帮助：http://codepen.io/anon/pen/dPNgvP

＆＃13;
＆＃13; 
.arrow {
  position: relative;
  height: 0px;
  width: 0px;
  border-top: 18px solid #dd1111;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  position: absolute;
  bottom: 40px;
  left: 57px;
  z-index: 1;
  animation: load-arrow 1.6s linear;
  animation-fill-mode: forwards;
  -webkit-animation: load-arrow 1.6s linear;
  -webkit-animation-fill-mode: forwards;
}
@keyframes load-arrow {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 55px);
  }
}
@-webkit-keyframes load-arrow {
  from {
    -webkit-transform: translate(0, 0);
  }
  to {
    -webkit-transform: translate(0, 55px);
  }
}
.pie {
  width: 140px;
  height: 140px;
  position: relative;
  border-radius: 140px;
  background-color: #DD1111;
  float: left;
  margin-right: 10px;
}
.pie .title {
  position: absolute;
  bottom: -40px;
  text-align: center;
  width: 100%;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
}
.pie1 .inner-right {
  transform: rotate(160deg);
  animation: load-right-pie-1 1s linear;
  -webkit-animation: load-right-pie-1 1s linear;
  -webkit-transform: rotate(160deg);
}
@keyframes load-right-pie-1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(160deg);
  }
}
@-webkit-keyframes load-right-pie-1 {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(160deg);
  }
}
.outer-left {
  clip: rect(0px 70px 140px 0px);
}
.outer-right {
  clip: rect(0px 140px 140px 70px);
}
.inner-left {
  background-color: #710000;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px 70px 140px 0px);
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}
.inner-right {
  background-color: #710000;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px 70px 140px 0px);
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
.content {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 20px;
  left: 20px;
  line-height: 100px;
  font-family: arial, sans-serif;
  font-size: 35px;
  text-align: center;
  z-index: 2;
}
.content span {
  opacity: 0;
  animation: load-content 3s;
  animation-fill-mode: forwards;
  animation-delay: 0.6s;
  -webkit-animation: load-content 3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.6s;
}
@keyframes load-content {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes load-content {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
＆＃13; 
<div class="pie pie1">
  <div class="title">Twitter</div>
  <div class="outer-right mask">
    <div class="inner-right"></div>
  </div>

  <div class="outer-left mask">
    <div class="inner-left"></div>
  </div>
  <div class="content">
    <span>44%</span>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：5)

您可以使用svg和JavaScript来简化代码并使其动态化。

此代码的作用是什么？

  1. 从text标记中提取百分比值，计算角度并将其存储为动画。
  2. 将深色部分从theta = 0设置为计算出的角度。

    3. 使用这种方法可以做的事情：

    1. 您只需更改44%代码中的text即可动态设置百分比。
      • 有效格式----＆gt; -% | --% | ---%，包括浮动值。
    2. 您可以通过更改t变量来更改动画速度。
    3. 您也可以使其响应。

      4. CodePen上的响应式演示 ---＆gt; width的{​​{1}}和height取决于svg＆＃39; #container。

      ＆＃13;
      ＆＃13; 
      width
      ＆＃13; 
      var dark = document.getElementById('dark'),
  t = 5,
  percentage = parseInt(document.getElementById('perc').innerHTML.slice(0, -1), 10),
  theta = 0,
  maxTheta = (180 * percentage) / 50,
  radius = document.getElementById('svg').getBBox().width / 2;
dark.setAttribute('transform', 'translate(' + radius + ',' + radius + ')');

var animate = setInterval(function() {
  theta += 0.5;
  var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + Math.sin(theta * Math.PI / 180) * radius + ',' + Math.cos(theta * Math.PI / 180) * -radius + 'z';
  dark.setAttribute('d', d);
  if (theta > maxTheta) {
    clearInterval(animate);
  }
}, t);
      ＆＃13;
      ＆＃13;
      ＆＃13;

      要设置多个百分比响铃，您可以使用<svg id="svg" width="140" height="140" viewBox="0 0 141 141"> <path id="light" d="M70,70 v-70 a70,70 0 0,1 0,140 a70,70 0 1,1 0,-140" fill="#DD1111" /> <path id="dark" d="M70,70 v-70 a70,70 0 0,1 0,0" fill="#710000" /> <path d="M20,70 a50,50 0 0,1 100,0 a50,50 0 0,1 -100,0" fill="white" /> <text id="perc" x="70" y="79" font-size="30px" text-anchor="middle">44%</text> </svg> es代替class s。同样，您无需对JavaScript代码进行任何更改，只需更改id代码中的百分比即可。

      enter image description here

      的 Demo on CodePen

      ＆＃13;
      ＆＃13; 
      text
      ＆＃13; 
      var dark = document.getElementsByClassName('dark'),
  radius = document.getElementsByClassName('svg')[0].getBBox().width / 2,
  t = 0.5,
  x = 0,
  y = 0,
  theta = {},
  maxTheta = calcTheta(document.getElementsByClassName('perc')),
  intervals = [];

function calcTheta(el) {
  var jbo = {};
  for (i = 0; i < el.length; i++) {
    theta[i] = 0;
    dark[i].setAttribute('transform', 'translate(' + radius + ',' + radius + ')');
    jbo[i] = (180 * parseInt(el[i].innerHTML.slice(0, -1), 10)) / 50;
  }
  return jbo;
}

var anim = function(j) {
  return function() {
    theta[j] += 0.5;
    var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta[j] > 180) ? 1 : 0) + ',1 ' + Math.sin(theta[j] * Math.PI / 180) * radius + ',' + Math.cos(theta[j] * Math.PI / 180) * -radius + 'z';
    dark[j].setAttribute('d', d);
    if (theta[j] > maxTheta[j]) {
      clearInterval(intervals[j]);
    }
  }
};

for (var j = 0; j < dark.length; j++) {
  intervals.push(setInterval(anim(j), t));
}
      ＆＃13; 
      #container {
  width: 100%;
}
.svg {
  display: inline-block;
  width: 16.5%;
}
      ＆＃13;
      ＆＃13;
      ＆＃13;

答案 1 :(得分：0)

这是一个很好的插件pieProgress.js来执行此操作。这是demo和tutorial how to use this.

希望这能解决您的问题。

相关问题
最新问题