1. Python技术站首页
  2. css

使用CSS3实现环形进度条效果

• css

使用CSS3可以很容易地实现环形进度条效果。下面是实现环形进度条的完整攻略：

准备工作

在实现环形进度条之前，我们需要新建一个 HTML 文件，并在文件头部引入 CSS 文件。

<!DOCTYPE html>
<html>
  <head>
    <title>CSS3 环形进度条</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

实现方案

Step 1：创建环形的 DOM 结构

首先，我们需要创建环形的 DOM 结构。这里我们可以使用一个 div 元素，然后通过 CSS3 绘制环形的结构。

<div class="progress-container">
  <div class="progress" data-progress="50"></div>
  <span class="progress-text">50%</span>
</div>

其中，.progress-container 用于包含整个进度条，.progress 用于实现进度条的动画效果，而 .progress-text 用于显示当前进度的文本信息。

Step 2：设置样式

接下来，我们需要设置样式。为了实现环形进度条的效果，需要使用 CSS3 的旋转和动画特性。

.progress-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 50px auto;
}

.progress {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: 0% 50%;
  border-radius: 50%;
  clip: rect(0, 75px, 150px, 0);
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: progress 1s linear forwards;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

@keyframes progress {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

在上面的样式中，我们分别设置了 .progress-container、.progress、.progress-bar、和 .progress-text 的样式。

其中，.progress 的样式使用了 transform-origin 属性，用于设置 CSS 变形的原点，这里设置为环形进度条的左边中心点位置。同时使用 clip 属性设置了进度条的裁剪位置，让进度条只显示右半部分。接着，我们在 .progress-bar 中又设置了一个动画效果，用于实现进度条的动画效果。最后，我们使用了 @keyframes 声明一个简单动画，实现了进度条的旋转动画效果。

Step 3：JavaScript 脚本

最后，我们需要使用 JavaScript 脚本来获取当前进度，并将其应用于进度条和文本信息中。

let progressElements = document.querySelectorAll('.progress');

progressElements.forEach((progressElement) => {
  let progress = parseFloat(progressElement.getAttribute('data-progress')) || 0;

  let progressBar = document.createElement('div');
  progressBar.classList.add('progress-bar');
  progressBar.style.transform = `rotate(${progress/100 * 360}deg)`;

  progressElement.appendChild(progressBar);

  let progressText = progressElement.querySelector('.progress-text');
  progressText.innerHTML = `${progress}%`;
});

在 JavaScript 脚本中，我们首先使用 querySelectorAll 获取所有的 .progress 元素，然后遍历每一个元素。接着，我们获取该元素上的 data-progress 属性值，就是当前进度的百分比。然后创建一个新的 .progress-bar 元素，并将其添加到 .progress 元素中。最后，还需要根据百分比设置 .progress-bar 的样式，以显示正确的进度条位置。

示例

下面我们演示两个使用 CSS3 实现环形进度条的示例：

示例一：简单的实现进度条，主要演示使用 CSS3 的变形效果

<div class="progress-container">
  <div class="progress" data-progress="50"></div>
  <span class="progress-text">50%</span>
</div>

.progress-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 50px auto;
}

.progress {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: 0% 50%;
  border-radius: 50%;
  clip: rect(0, 75px, 150px, 0);
  background: #efefef;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00bdff;
  clip: rect(0, 75px, 150px, 0);
  animation: progress 1s linear forwards;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

@keyframes progress {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

示例二：增加动态进度的支持，主要演示使用 JavaScript 实现进度动画效果

<div class="progress-container">
  <div class="progress" data-progress="0"></div>
  <span class="progress-text">0%</span>
</div>

<button class="start">开始</button>
<button class="reset">重置</button>

.progress-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 50px auto;
}

.progress {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: 0% 50%;
  border-radius: 50%;
  clip: rect(0, 75px, 150px, 0);
  background: #efefef;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) inset;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00bdff;
  clip: rect(0, 75px, 150px, 0);
  animation: progress 1s linear forwards;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

@keyframes progress {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.hide {
  display: none;
}

let progressElements = document.querySelectorAll('.progress');
let startButton = document.querySelector('.start');
let resetButton = document.querySelector('.reset');

progressElements.forEach((progressElement) => {
  let progress = parseFloat(progressElement.getAttribute('data-progress')) || 0;

  let progressBar = document.createElement('div');
  progressBar.classList.add('progress-bar');
  progressBar.style.transform = `rotate(${progress/100 * 360}deg)`;

  progressElement.appendChild(progressBar);

  let progressText = progressElement.querySelector('.progress-text');
  progressText.innerHTML = `${progress}%`;
});

startButton.addEventListener('click', () => {
  progressElements.forEach((progressElement) => {
    let progress = parseFloat(progressElement.getAttribute('data-progress')) || 0;
    let progressBar = progressElement.querySelector('.progress-bar');

    progressBar.style.animation = '';
    progressBar.offsetHeight;
    progressBar.style.animation = `progress ${1 + progress / 100}s linear forwards`;

    progressElement.setAttribute('data-progress', '100');
    progressBar.style.transform = `rotate(360deg)`;
    progressElement.querySelector('.progress-text').innerHTML = '100%';
  });
});

resetButton.addEventListener('click', () => {
  progressElements.forEach((progressElement) => {
    let progressBar = progressElement.querySelector('.progress-bar');

    progressBar.style.animation = '';
    progressBar.offsetHeight;
    progressBar.style.animation = `progress 1s linear forwards`;

    progressElement.setAttribute('data-progress', '0');
    progressBar.style.transform = `rotate(0deg)`;
    progressElement.querySelector('.progress-text').innerHTML = '0%';
  });
});

在示例二中，我们增加了两个按钮，用于模拟进度的开始和重置操作。这里我们需要动态修改进度条的样式以显示进度变化。为此，我们对 JavaScript 脚本进行了修改，增加了使用动画特性的代码来实现进度条的动态效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用CSS3实现环形进度条效果 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • excel表格如何制作导航栏效果 制作导航栏切换效果的方法

    关于“excel表格如何制作导航栏效果 制作导航栏切换效果的方法”的完整攻略，我将为您提供以下的详细说明： 制作导航栏效果 首先，打开需要添加导航栏的excel表格，在第一行创建一个导航栏区域，例如B1:F1。 在导航栏区域中输入需要添加的导航链接名称，例如“首页”、“联系我们”等等。 选中导航栏区域，使用鼠标右键或者点击“开始”选项卡中的“格式为表格”按钮…

    css 2023年6月11日
    00

  • 设置一个div层的最小宽度或最小高度

    设置一个div层的最小宽度或最小高度，可以用CSS中的min-width和min-height属性。这两个属性可以控制元素的最小宽度和最小高度值。 下面是完整攻略： 步骤一：选择元素 首先，需要选择需要设置最小宽度或最小高度的元素。可以使用CSS选择器来选择元素，例如： div { min-width: 200px; } 上面的代码会选择所有的<div…

    css 2023年6月10日
    00

  • JavaScript实现简易聊天对话框(加滚动条)

    下面是JavaScript实现简易聊天对话框(加滚动条)的完整攻略。 简介 这个项目的目标是实现一个简易的聊天对话框，用户可以在对话框内输入消息，同时页面支持滚动条。 准备工作 首先，我们需要准备一个HTML模板和CSS文件，用于布局和样式调整。模板如下： <!DOCTYPE html> <html lang="en"&…

    css 2023年6月10日
    00

  • CSS3实现3D翻书效果

    下面是“CSS3实现3D翻书效果”的完整攻略。 一、基础知识 首先，我们需要掌握以下两个知识点： CSS3 3D转换（transform-style、transform、perspective）：这是3D翻转效果的基础，用它可以将元素变成3D模式。其中，transform-style可以控制是否开启3D模式，transform可以控制元素的具体变换方式，pe…

    css 2023年6月10日
    00

  • 浅谈CSS在前端优化中一些值得注意的关键点

    浅谈CSS在前端优化中一些值得注意的关键点 1. 使用CSS预处理器 CSS预处理器可以让CSS编写更加简单和可维护。使用CSS预处理器可以使用变量、嵌套、混合等功能，从而减少代码的重复，使代码更加易于维护。另外，编写的CSS代码会自动缩小和压缩，从而减小文件体积，提高网页性能。 示例： 我们可以使用Sass预处理器来编写CSS。Sass可以帮助我们简化CS…

    css 2023年6月10日
    00

  • vue中改变滚动条样式的方法

    以下是详细讲解“Vue中改变滚动条样式的方法”的完整攻略。 改变滚动条样式的方法 1. 使用CSS伪元素改变滚动条样式 可以通过给滚动条容器添加如下CSS样式，利用CSS选择器来美化滚动条。 /*滚动条宽度和颜色设置*/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #EFE…

    css 2023年6月10日
    00

  • 表格边框以虚线显示的css样式

    要让表格边框以虚线显示，可以通过CSS样式进行控制。 一种方式是通过设置border-style属性为dashed或者dotted来使表格边框呈现虚线的样式，同时设置border-width属性来控制边框宽度，示例如下： table { border-collapse: collapse; } td, th { border: 1px dashed #ccc…

    css 2023年6月10日
    00

  • Dreamweaver网页中的文本怎么添加背景色?

    在Dreamweaver中，为网页中的文本添加背景色，可以通过以下几个步骤进行： 选中需要添加背景色的文本。 在顶部的工具栏中，点击“属性”选项卡。 在属性面板中，找到“背景颜色”一栏，点击右侧的颜色选择器。 在弹出的颜色选择器中，选择合适的背景色，可以在预览框中看到选中的颜色。 点击确定后，选中的文本就会自动添加所选的背景色。 示例1：添加单个文本的背景色…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部