前锋案例 | HTML、JS、CSS动画进度条创意

2024-01-12 15:43:48

美化网页设计的动画进度条：使用 HTML、JS 和 CSS 的分步指南

想象一下一个优雅的进度条，它随着时间的推移而优雅地增长或收缩，以直观的方式传达进展情况。借助 HTML、JS 和 CSS 的强大功能，创建这样的进度条既简单又令人满意。本文将深入探讨如何使用这些技术构建一个美观且交互友好的动画进度条。

HTML 架构：布局和元素

HTML 代码负责为我们的进度条建立结构。创建一个容器来容纳进度条，然后在内部放置一个进度条容器和一个按钮容器。进度条本身是一个宽为 0 的 div，随着进展而逐渐变宽。

<div class="container">
  <div class="progress-bar-container">
    <div class="progress-bar"></div>
  </div>
  <div class="button-container">
    <button id="prev-btn">后退</button>
    <button id="next-btn">前进</button>
  </div>
</div>

CSS 风格：设计和动画

CSS 代码负责为进度条元素赋予视觉吸引力和动画效果。进度条容器获得一个固定的宽度和圆角边框，而进度条本身则具有平滑的蓝色渐变和一个过渡动画，让其在用户点击按钮时平稳增长或收缩。

.progress-bar-container {
  width: 500px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #007bff, #00b5ea);
  transition: width 0.5s ease-in-out;
}

JavaScript 交互：响应用户输入

JavaScript 赋予进度条交互性，允许用户使用按钮控制其增长或收缩。为按钮添加事件监听器，并在点击时相应地调整进度条的宽度。

const progressBar = document.querySelector('.progress-bar');
const prevBtn = document.querySelector('#prev-btn');
const nextBtn = document.querySelector('#next-btn');

let progress = 0;

prevBtn.addEventListener('click', () => {
  if (progress > 0) {
    progress -= 10;
    progressBar.style.width = `${progress}%`;
  }
});

nextBtn.addEventListener('click', () => {
  if (progress < 100) {
    progress += 10;
    progressBar.style.width = `${progress}%`;
  }
});