<!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的IDbtn.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>