使用 HTML 和 CSS 制作动画技能栏

2025-05-26

使用 HTML 和 CSS 制作动画技能栏

在本文中，我将向您展示如何仅使用 HTML 和 CSS 代码创建动画技能栏。我之前设计过许多其他类型的进度条。但那次我使用了 JavaScript 或 JQuery。这次我仅借助 HTML 和 CSS 代码创建了这个技能栏。

首先，我在网页上制作了一个小盒子。然后我给这个盒子添加了一个标题，并使用了四个进度条。每个进度条都被赋予了一个特定的值。当你加载这个页面时，这个动画会从零开始达到你预先设定的含义。达到你预先设定的值需要两秒钟，所以我们可以在这里看到一种动画效果。

在这里我使用 CSS 代码的 @keyframes 创建了这个动画。

下面我将逐步向您展示如何使用 HTML 和 CSS 代码创建此动画技能栏。您也可以下载源代码来创建它。

步骤 1：设计网页

首先，我使用下面的CSS代码设计了网页。这里我使用了网页的背景颜色蓝色。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
  height:100vh;
    background-color: #0a7aca;
}
Enter fullscreen mode Exit fullscreen mode

设计网页

步骤2：在网页上创建一个框

现在，我使用下面的 HTML 和 CSS 代码创建了一个框。正如我之前所说，网页上有一个框，所有进度条都包含在里面。

我之前box-shadow: 0 20px 30px rgba (0,0,0,0.2)在这里给那个盒子周围加了彩色阴影。我把border-radius: 10px它弄得有点圆。

<div class="wrapper">
  <div class="container">

  </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.wrapper{
    width: 40%;
    min-width: 590px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.container{
    width: 100%;
    padding: 30px 30px 50px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
} 

.container *{
    font-family: "Poppins",sans-serif;
    color: black;
    font-weight: 500;
}
Enter fullscreen mode Exit fullscreen mode

在网页上创建一个框

步骤 3：将标题添加到框中

现在，我使用下面的代码创建了一个标题。如上图所示，这里使用了标题。font-size: 33px标题的text-align: center已用于将其放置在中间。

  <h2>Animated Skills </h2>
Enter fullscreen mode Exit fullscreen mode 
h2{
    margin-bottom: 50px;
    letter-spacing: 2px;
    text-align: center;
    font-size: 33px;
    font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

将标题添加到框中

步骤 4：添加技能栏中的所有信息

现在，我已经用 HTML 代码添加了这个动画技能栏的所有基本信息。首先，我添加了进度条四个进度条之一的信息。下图展示了它的可能效果。

 <div class="skills">
   <div class="details">
     <span>HTML</span>
     <span>90%</span>
   </div>
   <div class="bar">
      <div id="html-bar"></div>
   </div>
 </div>
Enter fullscreen mode Exit fullscreen mode

添加技能栏中的所有信息

上面我们已经添加了技能栏的信息。现在我添加其他三个进度条的信息。

 <div class="skills">
   <div class="details">
     <span>CSS</span>
     <span>75%</span>
   </div>
   <div class="bar">
      <div id="css-bar"></div>
   </div>
 </div>
Enter fullscreen mode Exit fullscreen mode 
 <div class="skills">
   <div class="details">
     <span>Javascript</span>
     <span>72%</span>
   </div>
   <div class="bar">
      <div id="javascript-bar"></div>
   </div>
 </div>
Enter fullscreen mode Exit fullscreen mode 
 <div class="skills">
   <div class="details">
     <span>jQuery</span>
     <span>68%</span>
   </div>
   <div class="bar">
      <div id="jQuery-bar"></div>
   </div>
 </div>
Enter fullscreen mode Exit fullscreen mode

添加技能栏中的所有信息

第六步：用css代码设计技能栏

现在，我已经借助 CSS 代码设计了上述添加的信息。这里，我使用了 的动画线周围添加了边框border: 2px solid # 0d96e0。这里我使用的动画线高度为 9px。

我之前border-radius: 10px把线的两端弄得平整圆润。我使用了width: 0进度条动画线的 ，这意味着正常情况下这里不会出现技能动画。后来我使用 @keyframes 给每条线赋予了不同的值。


.details{
    width: 100%;
    display: flex;  
    justify-content: space-between;
    margin-bottom: 10px;
}
.bar{
    position: relative;

    border: 2px solid #0d96e0;

    border-radius: 20px;

}
.bar div{
    position: relative;
    width: 0;
    height: 9px;
    border-radius: 10px;
    background-color: #0d96e0;


}
Enter fullscreen mode Exit fullscreen mode

使用下面的CSS代码，我在每个技能栏之间创建了一个距离。这margin-bottom: 30px将在每个技能栏之间创建30px的距离。

.skills:not(:last-child){
    margin-bottom: 30px;
}
Enter fullscreen mode Exit fullscreen mode

使用 CSS 代码设计技能栏

步骤 7：为每个技能栏的动画设置一个特定的值

上面说了，width: 0这里用到了进度条动画线的，也就是说正常情况下动画线是看不到的，现在我给各个赋予了不同的值。

我width: 90%在这里使用了第一行，这意味着这条彩色线在加载到 90% 时会停止。我设置了两秒的时间来制作这个动画。

#html-bar{
    animation: html-fill 2s forwards;
}
@keyframes html-fill{
    100%{
        width: 90%;
    }
}
Enter fullscreen mode Exit fullscreen mode

为每个技能栏的动画设置一个特定的值

同样的方法，我为另外三个 CSS 进度条添加了具体的值。宽度值的改变越多，彩色线条的值也会发生越大的变化。

#css-bar{
    animation: css-fill 2s forwards;
}
@keyframes css-fill{
    100%{
        width: 75%;
    }
}
Enter fullscreen mode Exit fullscreen mode 
#javascript-bar{
    animation: js-fill 2s forwards;
}
@keyframes js-fill {
    100%{
        width: 72%;
    }
}
Enter fullscreen mode Exit fullscreen mode 
#jQuery-bar{
    animation: jQuery-fill 2s forwards;
}
@keyframes jQuery-fill{
    100%{
        width: 58%;
    }
}
Enter fullscreen mode Exit fullscreen mode

动画技能栏 HTML 和 CSS

希望通过以上教程，您已经充分了解了我如何仅使用 HTML 和 CSS 代码创建这个动画技能栏。与此同时，我还使用 HTML 和 CSS 代码创建了更多设计。如果您愿意，可以查看这些设计。欢迎您通过评论告诉我们您对这个技能栏的喜爱程度。

相关文章：

  1. 响应式页脚 HTML CSS
  2. 海得拉巴的寄宿学校
  3. 使用 JavaScript 的简单秒表
  4. 怀特菲尔德的幼儿园
  5. javaScript 密码生成器
  6. 海得拉巴的国际学校
  7. 使用 HTML CSS 的侧边栏菜单

您可以访问我的博客获取更多类似的教程。https
://www.foolishdeveloper.com/

文章来源：https://dev.to/shantanu_jana/animated-skills-bar-html-and-css-1fbl
Devto 翻译
PREV
仅使用 HTML 和 CSS 的自动图像滑块
NEXT
100多个带有源代码的JavaScript项目