css仪表进度条 |css如何显示现在时间

首先，大家需要在HTML文件中创建一个div容器，用于包裹整个仪表进度条。在div中再嵌套两个div元素，分别用于展示进度和背景。具体代码如下：

<div class="wrapper">
<div class="progress"></div>
<div class="background"></div>
</div>

接下来，大家需要为仪表进度条设置CSS样式。其中，大家利用了CSS3中的transform和transition属性，实现了进度条动态的效果。

.wrapper {
height: 200px;
width: 200px;
position: relative;
margin: 50px auto;
transform: rotate(-125deg);
}
.progress, .background {
height: 100%;
width: 100%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.background {
background-color: #e8e8e8;
}
.progress {
background-color: #38a9ff;
transform-origin: 100%;
transition: transform 1s ease;
}

接下来，大家需要利用JS代码实现进度条动态变化的效果。大家使用setTimeout函数来模拟进度条的变化，实现时钟的效果。具体代码如下：

var progress = document.querySelector('.progress');
var timer = setInterval(function() {
var deg = +progress.dataset.percent;
deg = deg + 1;
progress.dataset.percent = deg;
progress.style.transform = 'rotate(' + deg * 3.6 + 'deg)';
if (deg >= 100) {
clearInterval(timer);
}
}, 10);

最后，大家完成了一款漂亮的仪表进度条。大家可以根据需要，调整CSS样式中的颜色、大小等参数，实现更加个性化的效果。欢迎大家尝试，发掘更多惊喜！