我需要在css中制作這樣的gif影片，我用代碼說明但我無法反轉影片

我正在嘗試使用 CSS 或 SVG 為進度條模擬此影片，以任何方式執行此影片？

我將字串添加為嵌入式代碼，我嘗試使用 SVG 而不是 CSS，此影像取自設計師發送的視頻

我正在處理的當前代碼示例嘗試應用影片

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    centerX = canvas.width / 2,
    centerY = canvas.height / 2,
    rad = (Math.PI * 2) / 50,
    speed = 1;
function blueCircle(speed) {
    context.save();
    context.beginPath();
    context.strokeStyle = "#ffffff";
    context.lineWidth = 4;
    context.arc(
        centerX,
        centerY,
        40,
        -Math.PI / 2,
        -Math.PI / 2   speed * rad,
        false
    );
    context.stroke();
    context.restore();
}
function reblueCircle(speed) {
    context.save();
    context.beginPath();
    context.strokeStyle = "#ffffff69";
    context.lineWidth = 4;
    context.arc(
        centerX,
        centerY,
        40,
        -Math.PI / 2,
        -Math.PI / 2   speed * rad,
        false
    );
    context.stroke();
    context.restore();
}
function whiteCircle() {
    context.save();
    context.beginPath();
    context.strokeStyle = "#ffffff69";
    context.lineWidth = 4;
    context.arc(centerX, centerY, 40, 0, Math.PI * 2, false);
    context.stroke();
    context.closePath();
    context.restore();
}
var res = false;
(function drawFrame() {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);
    whiteCircle();
    blueCircle(speed);
    if (res) {
        speed -= 0.1;
        reblueCircle(speed);
    }
    if (speed > 50 && !res) {
        res = true;
    } else if (speed < 50 && !res) {
        speed  = 0.1;
    } else if (speed > 50 && !res) {
        res = true;
    }
})();

body {
    background: #000;
}

<canvas id="canvas" width="84" height="84"></canvas>

uj5u.com熱心網友回復：

編輯：我解決了你的實際要求，沒有 JS，只有 CSS：

::root {
  --val: 0;
}

svg {
  transform: rotate(-90deg);
}

.percent {
  animation: load 3s infinite;
  stroke-dasharray: 100;
}


@keyframes load {
  0% {
    stroke-dashoffset: 0;
  }
  20% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: -200;
  }
}

<svg width="120" height="120" viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
    <circle class="percent" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
</svg>

老答案：

可以從此問題改編解決方案，如下所示：

let increasing = true
let progress = 0

function updateProgress() {
  progress = increasing ? progress   1 : progress - 1
  if(progress > 100) {
    progress = 100
    increasing = false
  }
  if(progress < 0) {
    progress = 0
    increasing = true
  }
  
  document.querySelector('svg circle.percent').style.setProperty('--value', progress);
  setTimeout(updateProgress, 50)
}

updateProgress()

::root {
  --val: 0;
}

svg {
  transform: rotate(-90deg);
}

.percent {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--value, 0));
  transition: all 0.1s;
}

<svg width="120" height="120" viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
    <circle class="percent" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" />
</svg>

但我必須說，如果你自己實作了畫布解決方案，做得很好 - 為什么不直接使用它呢？

標籤：javascript css svg

上一篇：在Latex檔案中嵌入SVG檔案的內容

下一篇：填充非線性Svg路徑描邊