好玩的进3D度条

最新推荐文章于 2024-09-28 22:15:52 发布
与妖为邻
最新推荐文章于 2024-09-28 22:15:52 发布
阅读量220
点赞数 1
文章标签： 3d css css3 动态渐变 JS自动输入
本文链接：https://blog.csdn.net/lulei5153/article/details/142607904
版权
<!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>