MVC 3D进度条

最新推荐文章于 2024-02-01 23:26:29 发布

☞机器猫ღ

最新推荐文章于 2024-02-01 23:26:29 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/weixin_44551890/article/details/95042669

版权

开发工具与关键技术：Visual Studio

今天给大家演示一款3D进度条，
利用CSS及JS制作特效，
代码如下：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>3D进度条</title>
    <link href="~/CS/css/style.css" rel="stylesheet" />
</head>

<body>
    <h1><b>3D</b>进度条</h1>

    <main class="perspective" id="first-bar">
        <section class="bar">
            <div class="bar-face back percentage"></div>
            <div class="bar-face floor percentage"></div>
            <div class="bar-face roof percentage"></div>
            <div class="bar-face front percentage"></div>
        </section>
        <input class="bar-input" type="range" min="0" max="101" value="64" />
    </main>
    <p>纯色</p>


    <main class="perspective" id="second-bar">
        <section class="bar">
            <div class="bar-face back percentage"></div>
            <div class="bar-face floor percentage"></div>
            <div class="bar-face roof percentage"></div>
            <div class="bar-face front percentage"></div>
        </section>
        <input class="bar-input" type="range" min="0" max="101" value="37" />
    </main>
    <p>图片</p>


    <main class="perspective" id="third-bar">
        <section class="bar">
            <div class="bar-face back percentage"></div>
            <div class="bar-face floor percentage"></div>
            <div class="bar-face roof percentage"></div>
            <div class="bar-face front percentage"></div>
            <div class="indicator">89%</div>
        </section>
        <input class="bar-input" type="range" min="0" max="100" value="89" />
    </main>
    <p class="third-bar-p">百分比</p>

    <script src="~/CS/js/index.js"></script>
</body>
</html>