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{
   .........完整代码请登录后点击上方下载按钮下载查看