<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好玩的3D进度条</title>
<style>
body {
color: black;
background: #3a6073;
}
.input-container {
position: absolute;
transform: translate(222%, 333%);
}
.input-container input {
outline: none;
background: none;
font-size: 20px;
color: #fff;
border-radius: 10px;
width: 100px;
}
img {
width: 190px;
position: absolute;
top: -170px;
left: -40px;
transform: rotate(90deg);/
}
.progress-container {
width: 400px;
height: 270px;
margin: 100px;
perspective: 1000px;
transform-origin: 50% 50%;
transform-style: preserve-3d;
}
.progress-box div {
text-align: center;
line-height: 100px;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(16, 109, 52, 0.34)
}
.progress-box {
width: 400px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transition: 0.6s;
transform-origin: 100% 50%;
transform: rotateZ(-90deg);
}
.back-face {
box-shadow: 0 -16px 80px rgba(0, 0, 0, 0.463),
0 1px 1px rgba(19, 11, 11, 0.3),
0 1px 1px rgba(8, 1, 1, 0.829);
transform-origin: 50% 50%;
transform: translateZ(-100px);
}
.front-face {
transform-origin: 50% 1000%;
transform: translateZ(0px);
}
.progress-box div.left-side {
width: 100px;
height: 100px;
transform-origin: 0% 100%;
transform: rotateY(90deg);
}
.progress-box div.right-side {
width: 100px;
height: 100px;
right: 0;
top: 0;
transform-origin: 100% 0%;
transform: rotateY(-90deg);
}
.top-side {
width: 100px;
height: 400px;
transform-origin: 50% 0%;
transform: rotateX(-90deg);
}
.bottom-side {
width: 100px;
height: 400px;
transform-origin: 50% 100%;
transform: rotateX(90deg);
}
.fill::before {
width: 300px;
height: 100px;
background-color: rgba(255, 7, 7, 0.402);
content: '';
display: block;
position: absolute;
margin: 0;
box-sizing: border-box;
transition: all 0.5s ease-out;
}
.progress-container .progress-box .progress-tip {
width: 60px;
height: 50px;
background-color: steelblue;
transform: translateZ(-10px) translateY(110px);
color: rgb(255, 255, 255);
line-height: 50px;
position: absolute;
left: 270px;
transition: all 0.5s ease-out;
}
.progress-container .progress-box .progress-tip::before {
content: '';
border-color: steelblue;
position: absolute;
left: 20px;
top: -17px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
.fill::before {
background-color: #b76565;
content: pointer;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-box">
<div class="back-face fill"></div>
<div class="front-face fill"></div>
<div class="left-side"></div>
<div class="right-side"></div>
<div class="top-side fill"></div>
<div class="bottom-side fill"></div>
<div class="progress-tip">
<span>80</span>
<img src="抠的图.png" alt="">
</div>
</div>
</div>
<div class="input-container">
<input type="text" class="per-value">
<button class="confirm">确定</button>
<button class="pause">暂停</button>
</div>
<script>
let btn = document.querySelector('.confirm');
let input = document.querySelector('.per-value');
let tip = document.querySelector('.progress-tip');
let tipValue = tip.children[0];
let intervalId; // 用于存储setInterval的ID
btn.onclick = function () {
document.styleSheets[0].addRule('.fill::before', 'width:' + input.value * 4 + 'px');
tip.style.left = input.value * 4 - 30 + 'px';
tipValue.innerHTML = input.value;
}
function autoInput() {
let values = [0, 20, 30, 40, 50, 60, 70, 80, 90, 100];
let index = 0;
intervalId = setInterval(() => {
input.value = values[index];
btn.onclick();
index = (index + 1) % values.length;
}, 500);
}
autoInput();
document.querySelector('.pause').onclick = function () {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
this.innerText = "开始";
} else {
autoInput();
this.innerText = "暂停";
}
}
</script>
</body>
</html>
