【每日一练】03—实现动画循环进度

最新推荐文章于 2024-09-09 19:00:27 发布

web前端开发V

最新推荐文章于 2024-09-09 19:00:27 发布

阅读量140

点赞数

文章标签： css js html javascript css3

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649127886&idx=2&sn=37445af8356a2b4d13a2c43566983819&chksm=be585c63892fd5752ee7ee84dc0b5283b11bc6d6d81f93cb8271888c5bd9777174e67e65520e&scene=126&&sessionid=0

版权

本文介绍了使用HTML和CSS创建动画循环进度条的实践，适用于展示技能熟练度，如在个人简历中。通过调整HTML代码中的`--num`变量和颜色变量，可以轻松定制各个技能的进度和颜色。文章提供了多个实例，包括HTML和CSS代码，适合前端开发者学习和参考。

摘要由CSDN通过智能技术生成

写在前面

今天是【每日一练】的第三练，也是持续学习的第三天。如果想学习一门技能，三分钟热度，是绝对不行的，因此，我开了这个【每日一练】栏目，把自己这些年坚持学习的习惯，通过这个栏目分享给你，希望你也能找到自己的【每日一练】，通过每天一个小小的刻意学习，然后慢慢去解决遇到的问题。

今天练习的内容，HTML代码看起来好像很长，但其实非常的简单，我们只要写好第一个效果，后面的效果基本都是直接套用修改即可完成。

因此，你只要学会第一个效果的写法即可。

这个效果，很多时候是用在展示某些成果或者某项技能的熟练程度，比方，我们做网页版的个人简历时，我们需要展示自己各项技能的情况，这时候，这个效果就可以排上用场了。

以下是今天小练习的最终效果：

HTML完整代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>【每日一练】03—CSS实现动画循环进度</title>
  </head>
  <body>
    <div class="container">
    <!--第一个动画圆 HTML代码开始-->
    <!--如果你HTML技能是100%就把num:数字修改为100，h2的地方也改为100-->
      <div class="card">
        <div class="percent" style="--clr:#04fc43;--num:89;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>89<span>%</span></h2>
            <p>Html</p>
          </div>
        </div>
      </div>
      <!--第一个动画圆 HTML代码结束，后面圆直接复制，修改相应的内容即可-->
      <div class="card">
        <div class="percent" style="--clr:#e69a0c;--num:95;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>95<span>%</span></h2>
            <p>CSS</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#fc0491;--num:80;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>80<span>%</span></h2>
            <p>JavaScript</p>
          </div>
        </div>
      </div>  
      <div class="card">
        <div class="percent" style="--clr:#260ae1;--num:90;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>90<span>%</span></h2>
            <p>Photoshop</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#0ae032;--num:65;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>65<span>%</span></h2>
            <p>After Effects</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#8b12ee;--num:55;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>55<span>%</span></h2>
            <p>Animate</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#f36d0e;--num:95;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>95<span>%</span></h2>
            <p>Illustrator </p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#04fc43;--num:88;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>88<span>%</span></h2>
            <p>Lightroom</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#0f08de;--num:80;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>80<span>%</span></h2>
            <p>Premiere</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#036a1d;--num:85;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>85<span>%</span></h2>
            <p>Dreamweav</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#04fc43;--num:89;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>89<span>%</span></h2>
            <p>VSCode</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#fee800;--num:70;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>70<span>%</span></h2>
            <p>InDesign</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#ff00be;--num:60;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>60<span>%</span></h2>
            <p>Javascript</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="percent" style="--clr:#06ccff;--num:95;">
          <div class="dot"></div>
          <svg>
            <circle cx="70" cy="70" r="70"></circle>
            <circle cx="70" cy="70" r="70"></circle>
          </svg>
          <div class="number">
            <h2>95<span>%</span></h2>
            <p>Photoshop</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS完整代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
}
.container 
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 40px;
}
.container .card 
{
  position: relative;
  width: 220px;
  height: 250px;
  background: #2a2a2a;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .card .percent 
{
  position: relative;
  width: 150px;
  height: 150px;
}
.container .card .percent svg 
{
  position: relative;
  width: 150px;
  height: 150px;
  transform: rotate(270deg);
}
.container .card .percent svg circle 
{
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke-width: 2;
  stroke: #191919;
  transform: translate(5px,5px);
}
.container .card .percent svg circle:nth-child(2)
{
  stroke: var(--clr);
  stroke-dasharray: 440;
  stroke-dashoffset: calc(440 - (440 * var(--num)) / 100);
  opacity: 0;
  animation: fadeIn 1s linear forwards;
  animation-delay: 2.5s;
}
@keyframes fadeIn 
{
  0% 
  {
    opacity: 0;
  }
  100% 
  {
    opacity: 1;
  }
}
.dot 
{
  position: absolute;
  inset: 5px;
  z-index: 10;
  /* 360deg / 100 = 3.6 */
  animation: animateDot 2s linear forwards;
}
@keyframes animateDot 
{
  0% 
  {
    transform: rotate(0deg);
  }
  100% 
  {
    transform: rotate(calc(3.6deg * var(--num)));
  }
}
.dot::before 
{
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--clr);
  box-shadow: 0 0 10px var(--clr),
  0 0 30px var(--clr);
}
.number 
{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  animation: fadeIn 1s linear forwards;
  animation-delay: 2.5s;
}
.number h2 
{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 2.5em;
}
.number h2 span 
{
  font-weight: 300;
  color: #fff;
  font-size: 0.5em;
}
.number p 
{
  font-weight: 300;
  font-size: 0.75em;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

今天练习的小项目，内容加载完后的效果如下：

写在最后

以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

PS：我们的视频号上也更新了一些案例的练习，也欢迎大家关注我们的视频号，后面视频号上的源码案例，我也会逐步分享出来。

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】03—实现动画循环进度

写在前面今天是【每日一练】的第三练，也是持续学习的第三天。如果想学习一门技能，三分钟热度，是绝对不行的，因此，我开了这个【每日一练】栏目，把自己这些年坚持学习的习惯，通过这个栏目分享给你，希望你也能找到自己的【每日一练】，通过每天一个小小的刻意学习，然后慢慢去解决遇到的问题。今天练习的内容，HTML代码看起来好像很长，但其实非常的简单，我们只要写好第一个效果，后面的效果基...
复制链接

扫一扫