使用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技术站
微信扫一扫 
支付宝扫一扫 