如何在CSS初级项目中设置进度条_animation与width变化显示进度

答案：通过CSS的width属性与@keyframes结合实现进度条动画，首先构建外层背景和内层进度元素，设置初始宽度为0，利用@keyframes定义从0%到100%的宽度变化动画，并将动画应用到进度条元素上，持续2秒且使用ease-in-out缓动，配合forwards保持最终状态，同时通过overflow:hidden和border-radius优化外观，也可通过JavaScript动态设置宽度以显示特定进度值。

在CSS初级项目中实现进度条动画，关键在于利用width属性的变化配合@keyframes来模拟进度增长效果。通过设置容器样式和动态宽度变化，可以直观地展示加载或任务完成进度。

1. 创建基础结构与样式

先用HTML搭建进度条的基本结构，外层容器表示进度条背景，内层元素表示当前进度部分。

示例代码：

<div class="progress-bar">
  <div class="progress"></div>
</div>

然后使用CSS设置外观：

立即学习“前端免费学习笔记（深入）”；

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
<p>.progress {
height: 100%;
width: 0;
background-color: #4caf50;
border-radius: 10px;
}</p>

这里将.progress的初始width设为0，表示进度从零开始。

2. 使用 keyframes 定义宽度动画

通过@keyframes规则定义从0%到100%的宽度变化过程。

摩笔天书

摩笔天书AI绘本创作平台

135

查看详情

@keyframes fill-progress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

这个动画会把元素的width从0逐步增加到100%。

3. 应用动画到进度条

将定义好的动画应用到.progress元素上，并设置持续时间、缓动函数等参数。

.progress {
  height: 100%;
  width: 0;
  background-color: #4caf50;
  border-radius: 10px;
  animation: fill-progress 2s ease-in-out forwards;
}

其中：

• 2s 表示动画持续2秒
• ease-in-out 让动画开始和结束更平滑
• forwards 确保动画结束后保持最终状态（即width=100%）

4. 可选：控制不同进度值

如果想显示特定百分比（如70%），可不使用动画，直接设置width：

.progress {
  width: 70%; /* 固定进度 */
}

或者结合JavaScript动态设置：

document.querySelector('.progress').style.width = '70%';

基本上就这些。掌握width变化与@keyframes结合的方法，就能在简单项目中实现清晰流畅的进度条效果。注意overflow: hidden和border-radius能让视觉更美观，而forwards能防止动画回退。不复杂但容易忽略细节。

以上就是如何在CSS初级项目中设置进度条_animation与width变化显示进度的详细内容，更多请关注php中文网其它相关文章！