动画进度条

最新推荐文章于 2024-02-21 09:47:41 发布

云处安

最新推荐文章于 2024-02-21 09:47:41 发布

阅读量149

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36575358/article/details/108101709

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery-2.1.4.min.js"></script>
    <title>进度条</title>
    <style>
        /*进度条*/
        .lx{
            display: flex;
        }
        .skillbar {
            padding: 5px;
            -webkit-transform:rotateX(180deg);
            transform:rotateX(180deg);
            margin: 20px auto 20px;
            position:relative;
            display:block;
            width : 8px;
            background:#eee;
            height : 220px;
            border-radius:10px;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            -webkit-transition:0.2s linear;
            transition:0.2s linear;
            -webkit-transition-property:width, background-color;
            transition-property:width, background-color;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .skillbar-title {
            position:absolute;
            top:0;
            left:0;
            width:110px;
            font-weight:bold;
            font-size:13px;
            color:#ffffff;
            background:#6adcfa;
            -webkit-border-top-left-radius:5px;
            -webkit-border-bottom-left-radius:5px;
            -moz-border-radius-topleft:5px;
            -moz-border-radius-bottomleft:5px;
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
        }

        .skillbar-title span {
            display:block;
            background:rgba(0, 0, 0, 0.1);
            padding:0 20px;
            height:35px;
            line-height:35px;
            -webkit-border-top-left-radius:5px;
            -webkit-border-bottom-left-radius:5px;
            -moz-border-radius-topleft:5px;
            -moz-border-radius-bottomleft:5px;
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
        }

        .skillbar-bar {
            border-radius: 10px;
            width : 8px;
            background: -webkit-gradient(linear,
            right top, left top,
            from(#86fe4c),
            color-stop(50%, #fffd6d),
            color-stop(75%, #ffe96d),
            color-stop(90%, #ffb375),
            to(#ff6662));
            background: linear-gradient(-90deg,
            #86fe4c 0%,
            #fffd6d 50%,
            #ffe96d 75%,
            #ffb375 90%,
            #ff6662 100%);
        }

        .skill-bar-percent {
            transform:rotate(270deg);
            position:absolute;
            right:0px;
            bottom:50px;
            font-size:12px;
            width:20px;
            color:#ffffff;
            color:rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
<div class="lx">
    <div class="skillbar clearfix" data-percent="100%">
        <div class="skillbar-bar" style="background: #e67e22;"></div>
        <div class="skill-bar-percent">100%</div>
    </div>
    <div class="skillbar clearfix" data-percent="100%">
        <div class="skillbar-bar" style="background: #e67e22;"></div>
        <div class="skill-bar-percent">100%</div>
    </div>
    <div class="skillbar clearfix" data-percent="100%">
        <div class="skillbar-bar" style="background: #e67e22;"></div>
        <div class="skill-bar-percent">100%</div>
    </div>
    <div class="skillbar clearfix" data-percent="100%">
        <div class="skillbar-bar" style="background: #e67e22;"></div>
        <div class="skill-bar-percent">100%</div>
    </div>
    <div class="skillbar clearfix" data-percent="100%">
        <div class="skillbar-bar" style="background: #e67e22;"></div>
        <div class="skill-bar-percent">100%</div>
    </div>
</div>
<script>
    $('.skillbar').each(function(){
        $(this).find('.skillbar-bar').animate({
            height:$(this).attr('data-percent')
        },2000);
    });
</script>
</body>
</html>

在这里插入图片描述

云处安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画进度条

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-
复制链接

扫一扫