html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML+CSS+JS的3D进度条</title>
<style>
body {
color: black;
background: radial-gradient(at 60% 0%, #3a6073, #1c2522);
}
.input-div {
width: 260px;
margin: 200px 370px;
height: 50px;
border-radius: 10px;
background: linear-gradient(to right, #3a6073, #1c2522);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.input-div input {
outline: none;
background: none;
font-size: 20px;
color: #fff;
border-radius: 10px;
}
.input-div .confirm {
position: absolute;
right: 10px;
background-color: #f11818;
color: #fff;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
}
/* ******************************************** */
.content {
width: 400px;
height: 270px;
margin: 100px;
perspective: 1000px;
transform-origin: 50% 50%;
transform-style: preserve-3d;
}
.pro div {
text-align: center;
line-height: 100px;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(16, 109, 52, 0.34)
}
.pro {
width: 400px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transition: 0.6s;
transform-origin: 100% 50%;
transform: rotateZ(-90deg);
}
.back {
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 {
transform-origin: 50% 1000%;
transform: translateZ(0px);
}
.pro div.left {
width: 100px;
height: 100px;
transform-origin: 0% 100%;
transform: rotateY(90deg);
}
.pro div.right {
width: 100px;
height: 100px;
right: 0;
top: 0;
transform-origin: 100% 0%;
transform: rotateY(-90deg);
}
.up {
width: 100px;
height: 400px;
transform-origin: 50% 0%;
transform: rotateX(-90deg);
}
.down {
width: 100px;
height: 400px;
transform-origin: 50% 100%;
transform: rotateX(90deg);
}
/* ************************************************************8 */
.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;
}
.content .pro .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;
}
.content .pro .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="content">
<div class="pro">
<div class="back fill"></div>
<div class="front fill"></div>
<div class="left "></div>
<div class="right"></div>
<div class="up fill"></div>
<div class="down fill"></div>
<div class="tip">
<span>75</span>
</div>
</div>
</div>
<div class="input-div">
<input type="text" class="per-value">
<button class="confirm">确定</button>
</div>
<script>
let btn = document.querySelector('.confirm');
let input = document.querySelector('.per-value');
let tip = document.querySelector('.tip');
let tipValue = tip.children[0];
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;
}
</script>
</body>
</html>
