gsap+css实现单个div实现圆形进度条动画效果代码-html代码-BFW代码库

gsap+css实现单个div实现圆形进度条动画效果代码

代码语言：html

所属分类：进度条

代码描述：gsap+css实现单个div实现圆形进度条动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
        body {
          min-height: 100vh;
          width: min(100%, 45rem);
          margin-inline: auto;
          padding: 2rem;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
          place-items: center;
          gap: 2rem;
          background-color: #1D1E22;
        }
        .circle-diagram{
          --degree: calc(360deg / 100 * var(--percent));
          --hue: calc(360 / 100 * var(--percent));
          --accent-color: hsl(var(--hue), 100%, 50%);
        
          font-size: 1rem;
          width: 100%;
          max-width: 15rem;
          aspect-ratio: 1;
          position: relative;
          border-radius: 50%;
          filter: drop-shadow(0 0.5rem .5rem rgb(0 0 0 / .5));
          
          display: grid;
          place-items: center;
          font-weight: 700;
          font-family: system-ui, sans-serif;
          color: var(--accent-color);
          text-shadow: 0 0 5px rgb(0 0 0);
          cursor: pointer;
        }
        .circle-diagram::before, .circle-diagram::after{
          content: "";
          position: absolute;
          border-radius: 50%;
          z-index: -1;
        }
        .circle-diagram::before{
          inset: 1em;
          background-color: var(--accent-color);
          background-image: 
            radial-gradient(
              circle at calc(50% - 0.25rem) calc(50% + 0.25rem),
              rgb(0 0 0 / .25) 25%,
              transparent calc(25% + 0.5rem)
            ),
            conic-gradient(
              rgb(255 255 255 / .25) 0deg,
              rgb(0 0 0 / .25) var(--degree)
            ),
            conic-gradient(
              at calc(50% - 0.4rem) calc(50% +.........完整代码请登录后点击上方下载按钮下载查看