CSS SVG 路径 - 圆形进度条（小修正）

问题描述 投票：0回答：3

正如你从下面的代码中看到的，我有一个可爱的圆形进度条，但是我有几个问题，并且对如何实现这个目标有点迷失（理想情况下我不想使用任何 JS）

  1. 我想让周围的粉色条是弯曲的而不是 平，这可能吗？就像它的边缘一样。所以而不是它是 |开头和结尾有点像）。
  2. 中间那个跳动的圆圈，能不能暂停一下 动画完成后大约 1 秒，然后再开始 又来了？

/* Load Progress Animation */

@-webkit-keyframes load {
  0% {
    stroke-dashoffset: 0
  }
}
@-moz-keyframes load {
  0% {
    stroke-dashoffset: 0
  }
}
@keyframes load {
  0% {
    stroke-dashoffset: 0
  }
}
/* Qik Progress Container */

.progress {
  position: relative;
  display: inline-block;
  padding: 0;
  text-align: center;
}
/* Item SVG */

.progress svg {
  width: 4rem;
  height: 4rem;
}
.progress svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
  fill: none;
  stroke-width: 20;
  stroke-dasharray: 629;
  stroke: rgba(60, 99, 121, 0.9);
  -webkit-animation: load 8s;
  -moz-animation: load 8s;
  -o-animation: load 8s;
  animation: load 8s;
}
.pulse {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: #ff1251;
  position: absolute;
  top: 1.45rem;
  left: 1.45rem;
  -webkit-animation: pulse 0.6s linear infinite;
  -moz-animation: pulse 0.6s linear infinite;
  -ms-animation: pulse 0.6s linear infinite;
  animation: pulse 0.6s linear infinite;
}
@keyframes "pulse" {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes "pulse" {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes "pulse" {
  0% {
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
<div class="progress">
  <svg viewBox="-10 -10 220 220">
    <g fill="none" stroke-width="20" transform="translate(100,100)">
      <path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
    </g>
  </svg>
  <svg viewBox="-10 -10 220 220">
    <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
  </svg>
  <div class="pulse"></div>
</div>

html css svg
3个回答
3
投票

我重写了整个代码。

对于第一个问题，您可以简单地使用

stroke-linecap="round"
。

对于第二个，您必须为延迟添加额外的 

@keyframes
规则。

body {
  background: #072237;
}
h3 {
  color: #ffffff;
}
#loader {
  position: relative;
  width: 80px;
  height: 80px;
}
#ring {
  -webkit-animation: load 6s 1 forwards;
  animation: load 6s 1 forwards;
}
#circle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  background: #FF1251;
  border-radius: 50%;
  transform: scale(0.8);
  -webkit-animation: pulse 1.2s 3;
  animation: pulse 1.2s 3;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}
@-webkit-keyframes load {
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes load {
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
<div id="loader">
  <svg height="80" width="80" viewBox="-10 -10 220 220">
    <path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
    <path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
  </svg>
  <div id="circle"></div>
</div>

0
投票

不。 1.可以使用

stroke-linecap
，但它需要对您的代码进行一些更改，因为在您的情况下，红线实际上是背景，灰色是笔画 - 所以它会导致凹圆，所以“（”，而不是红线末尾的“）”。 2. 可以使用设置为 
alternate
的较长动画来完成，以便它在 50% 和 100% 之间“休眠”并返回。我做了一些改变：

http://jsfiddle.net/3yq3kmo1/

SVG 的变化（第二个元素）：

<svg viewBox="-10 -10 220 220">
    <circle r="100" cx="100" cy="100" stroke-dashoffset="0" />
</svg>

CSS（请注意，破折号偏移量已反转，因此现在红色笔画增大并隐藏灰色，而不是红色收缩并显示灰色；第一个 SVG 元素中路径上的 

stroke
现在是灰色的。）

.progress svg:nth-child(2) circle {
  fill: none;
  stroke-width: 20;
  stroke-dasharray: 629;
  stroke: #ff1251;
  stroke-linecap:round;
  animation: load 8s;
}

动画暂停：

.pulse {
   animation: pulse 1.6s linear infinite alternate;
 }
 @keyframes pulse {
 0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
 }
0
投票

body {
  background: #072237;
}
h3 {
  color: #ffffff;
}
#loader {
  position: relative;
  width: 80px;
  height: 80px;
}
#ring {
  -webkit-animation: load 6s 1 forwards;
  animation: load 6s 1 forwards;
}
#circle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  background: #FF1251;
  border-radius: 50%;
  transform: scale(0.8);
  -webkit-animation: pulse 1.2s 3;
  animation: pulse 1.2s 3;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}
@-webkit-keyframes load {
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes load {
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
<div id="loader">
  <svg height="80" width="80" viewBox="-10 -10 220 220">
    <path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
    <path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
  </svg>
  <div id="circle"></div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.