如何创建具有自定义百分比停止点的 CSS 进度圆？-css教程-PHP中文网

如何创建具有自定义百分比停止点的 CSS 进度圆？

Barbara Streisand

发布： 2024-12-10 02:35:13

原创

911 人浏览过

How to Create a CSS Progress Circle with Custom Percentage Stops?

如何创建带有自定义百分比停止点的 CSS 进度圆

您可能会遇到需要圆形进度条，但默认动画圆填充到 100% 的情况不符合您的规格。在本文中，我们将演示如何创建一个可以在特定百分比处停止的 CSS 进度圈。

CSS 实现

我们的目标是使用 CSS 来实现这个具有特定百分比的进度圈。百分比停止。操作方法如下：

.wrapper {
  width: 100px;
  height: 100px;
  position: absolute;
  clip: rect(0px, 100px, 100px, 50px);
}

.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}

div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function:linear;
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s;
  -webkit-animation-delay: 3s;
  -webkit-animation-name: close-wrapper;
}

.circle[data-anim~=left] {
  -webkit-animation-duration: 6s;
  -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s;
  -webkit-animation-name: right-spin;
}

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

登录后复制

HTML 结构

CSS 就位后，您可以使用以下 HTML 结构创建进度圈：

<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>

登录后复制

此代码将创建一个以半圆（50%）开始的进度圆，然后将左侧旋转 360 度，将右侧旋转180 度。