HTML制作一个有意思的进度条 – 死神来了

已于 2024-10-03 16:09:32 修改
阅读量692 收藏
点赞数 14
分类专栏： HTML5 文章标签： html 前端
于 2024-09-22 14:04:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chwmq/article/details/142436226
版权

目录

以下是运行结果：

 以下是代码： 

 

以下是运行结果：

4923ad2244634908999a241b826cafcf.png 

 

 以下是代码： 

<script src="https://cdn.staticfile.net/jquery/2.2.4/jquery.min.js"></script>
<div id="deadline">
    <svg preserveAspectRatio="none" id="line" viewBox="0 0 581 158" enable-background="new 0 0 581 158">
        <g id="fire">
            <rect id="mask-fire-black" x="511" y="41" width="38" height="34" />
            <g>
                <defs>
                    <rect id="mask_fire" x="511" y="41" width="38" height="34" />
                </defs>
                <clipPath id="mask-fire_1_">
                    <use xlink:href="#mask_fire" overflow="visible" />
                </clipPath>
                <g id="group-fire" clip-path="url(#mask-fire_1_)">
                    <path id="red-flame" fill="#B71342" d="M528.377,100.291c6.207,0,10.947-3.272,10.834-8.576 c-0.112-5.305-2.934-8.803-8.237-10.383c-5.306-1.581-3.838-7.9-0.79-9.707c-7.337,2.032-7.581,5.891-7.11,8.238 c0.789,3.951,7.56,4.402,5.077,9.48c-2.482,5.079-8.012,1.129-6.319-2.257c-2.843,2.233-4.78,6.681-2.259,9.703 C521.256,98.809,524.175,100.291,528.377,100.291z" />
                    <path id="yellow-flame" opacity="0.71" fill="#F7B523" d="M528.837,100.291c4.197,0,5.108-1.854,5.974-5.417 c0.902-3.724-1.129-6.207-5.305-9.931c-2.396-2.137-1.581-4.176-0.565-6.32c-4.401,1.918-3.384,5.304-2.482,6.658 c1.511,2.267,2.099,2.364,0.42,5.8c-1.679,3.435-5.42,0.764-4.275-1.527c-1.921,1.512-2.373,4.04-1.528,6.563 C522.057,99.051,525.994,100.291,528.837,100.291z" />
                    <path id="white-flame" opacity="0.81" fill="#FFFFFF" d="M529.461,100.291c-2.364,0-4.174-1.322-4.129-3.469 c0.04-2.145,1.117-3.56,3.141-4.198c2.022-0.638,1.463-3.195,0.302-3.925c2.798,0.821,2.89,2.382,2.711,3.332 c-0.301,1.597-2.883,1.779-1.938,3.834c0.912,1.975,3.286,0.938,2.409-0.913c1.086,0.903,1.826,2.701,0.864,3.924 C532.18,99.691,531.064,100.291,529.461,100.291z" />
                </g>
            </g>
        </g>
        <g id="progress-trail">
            <path fill="#FFFFFF" d="M491.979,83.878c1.215-0.73-0.62-5.404-3.229-11.044c-2.583-5.584-5.034-10.066-7.229-8.878
                              c-2.854,1.544-0.192,6.286,2.979,11.628C487.667,80.917,490.667,84.667,491.979,83.878z" />
            <path fill="#FFFFFF" d="M571,76v-5h-23.608c0.476-9.951-4.642-13.25-4.642-13.25l-3.125,4c0,0,3.726,2.7,3.625,5.125
                              c-0.071,1.714-2.711,3.18-4.962,4.125H517v5h10v24h-25v-5.666c0,0,0.839,0,2.839-0.667s6.172-3.667,4.005-6.333
                              s-7.49,0.333-9.656,0.166s-6.479-1.5-8.146,1.917c-1.551,3.178,0.791,5.25,5.541,6.083l-0.065,4.5H16c-2.761,0-5,2.238-5,5v17
                              c0,2.762,2.239,5,5,5h549c2.762,0,5-2.238,5-5v-17c0-2.762-2.238-5-5-5h-3V76H571z" />
            <path fill="#FFFFFF" d="M535,65.625c1.125,0.625,2.25-1.125,2.25-1.125l11.625-22.375c0,0,0.75-0.875-1.75-2.125
                              s-3.375,0.25-3.375,0.25s-8.75,21.625-9.875,23.5S533.875,65,535,65.625z" />
        </g>
        <g>
            <defs>
                <path id="SVGID_1_" d="M484.5,75.584c-3.172-5.342-5.833-10.084-2.979-11.628c2.195-1.188,4.646,3.294,7.229,8.878
                               c2.609,5.64,4.444,10.313,3.229,11.044C490.667,84.667,487.667,80.917,484.5,75.584z M571,76v-5h-23.608
                               c0.476-9.951-4.642-13.25-4.642-13.25l-3.125,4c0,0,3.726,2.7,3.625,5.125c-0.071,1.714-2.711,3.18-4.962,4.125H517v5h10v24h-25
                               v-5.666c0,0,0.839,0,2.839-0.667s6.172-3.667,4.005-6.333s-7.49,0.333-9.656,0.166s-6.479-1.5-8.146,1.917
                               c-1.551,3.178,0.791,5.25,5.541,6.083l-0.065,4.5H16c-2.761,0-5,2.238-5,5v17c0,2.762,2.239,5,5,5h549c2.762,0,5-2.238,5-5v-17
                               c0-2.762-2.238-5-5-5h-3V76H571z M535,65.625c1.125,0.625,2.25-1.125,2.25-1.125l11.625-22.375c0,0,0.75-0.875-1.75-2.125
                               s-3.375,0.25-3.375,0.25s-8.75,21.625-9.875,23.5S533.875,65,535,65.625z" />
            </defs>
            <clipPath id="SVGID_2_">
                <use xlink:href="#SVGID_1_" overflow="visible" />
            </clipPath>
            <rect id="progress-time-fill" x="-100%" y="34" clip-path="url(#SVGID_2_)" fill="#BE002A" width="586" height="103" />
        </g>

        <g id="death-group">
            <path id="death" fill="#BE002A" d="M-46.25,40.416c-5.42-0.281-8.349,3.17-13.25,3.918c-5.716,0.871-10.583-0.918-10.583-0.918
                                         C-67.5,49-65.175,50.6-62.083,52c5.333,2.416,4.083,3.5,2.084,4.5c-16.5,4.833-15.417,27.917-15.417,27.917L-75.5,84.75
                                         c-1,12.25-20.25,18.75-20.25,18.75s39.447,13.471,46.25-4.25c3.583-9.333-1.553-16.869-1.667-22.75
                                         c-0.076-3.871,2.842-8.529,6.084-12.334c3.596-4.22,6.958-10.374,6.958-15.416C-38.125,43.186-39.833,40.75-46.25,40.416z
                                         M-40,51.959c-0.882,3.004-2.779,6.906-4.154,6.537s-0.939-4.32,0.112-7.704c0.82-2.64,2.672-5.96,3.959-5.583
                                         C-39.005,45.523-39.073,48.8-40,51.959z" />
            <path id="death-arm" fill="#BE002A" d="M-53.375,75.25c0,0,9.375,2.25,11.25,0.25s2.313-2.342,3.375-2.791
                                             c1.083-0.459,4.375-1.75,4.292-4.75c-0.101-3.627,0.271-4.594,1.333-5.043c1.083-0.457,2.75-1.666,2.75-1.666
                                             s0.708-0.291,0.5-0.875s-0.791-2.125-1.583-2.959c-0.792-0.832-2.375-1.874-2.917-1.332c-0.542,0.541-7.875,7.166-7.875,7.166
                                             s-2.667,2.791-3.417,0.125S-49.833,61-49.833,61s-3.417,1.416-3.417,1.541s-1.25,5.834-1.25,5.834l-0.583,5.833L-53.375,75.25z" />
            <path id="death-tool" fill="#BE002A" d="M-20.996,26.839l-42.819,91.475l1.812,0.848l38.342-81.909c0,0,8.833,2.643,12.412,7.414
                                              c5,6.668,4.75,14.084,4.75,14.084s4.354-7.732,0.083-17.666C-10,32.75-19.647,28.676-19.647,28.676l0.463-0.988L-20.996,26.839z" />
        </g>
        <path id="designer-body" fill="#FEFFFE" d="M514.75,100.334c0,0,1.25-16.834-6.75-16.5c-5.501,0.229-5.583,3-10.833,1.666
                                               c-3.251-0.826-5.084-15.75-0.834-22c4.948-7.277,12.086-9.266,13.334-7.833c2.25,2.583-2,10.833-4.5,14.167
                                               c-2.5,3.333-1.833,10.416,0.5,9.916s8.026-0.141,10,2.25c3.166,3.834,4.916,17.667,4.916,17.667l0.917,2.5l-4,0.167L514.75,100.334z
                                               " />

        <circle id="designer-head" fill="#FEFFFE" cx="516.083" cy="53.25" r="6.083" />

        <g id="designer-arm-grop">
            <path id="designer-arm" fill="#FEFFFE" d="M505.875,64.875c0,0,5.875,7.5,13.042,6.791c6.419-0.635,11.833-2.791,13.458-4.041s2-3.5,0.25-3.875
                                                s-11.375,5.125-16,3.25c-5.963-2.418-8.25-7.625-8.25-7.625l-2,1.125L505.875,64.875z" />
            <path id="designer-pen" fill="#FEFFFE" d="M525.75,59.084c0,0-0.423-0.262-0.969,0.088c-0.586,0.375-0.547,0.891-0.547,0.891l7.172,8.984l1.261,0.453
                                                l-0.104-1.328L525.75,59.084z" />
        </g>
    </svg>

    <div class="deadline-days">
        Deadline <span class="day">7</span> <span class="days">days</span>
    </div>

</div>
<style>
    html {
        font-size: 1em;
        line-height: 1.4;
    }
    
    html,
    body {
        height: 100%;
    }
    
    body {
        margin: 0;
        padding: 0;
        background: #000;
    }
    
    
    #deadline {
        width:581px;
        max-width: 100%;
        height:158px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    #deadline svg {
        width: 100%;
    }
    
    #progress-time-fill {
        animation-name: progress-fill; 
        animation-timing-function: linear; 
        animation-iteration-count: infinite;
    }
    
    /* Death */
    #death-group {
        animation-name: walk;
        animation-timing-function: ease; 
        animation-iteration-count: infinite;
        transform: translateX(0);
    }
    
    #death-arm {
        animation: move-arm 3s ease infinite;
        /* transform-origin: left center; */
        transform-origin: -60px 74px;
    }
    
    #death-tool {
        animation: move-tool 3s ease infinite;
        transform-origin: -48px center;
    }
    
    /* Designer */
    
    #designer-arm-grop {
        animation: write 1.5s ease infinite;
        transform: translate(0, 0) rotate(0deg) scale(1, 1);
        transform-origin: 90% top;
    }
    
    .deadline-days {
        color: #fff;
        text-align: center;
        width: 100px;
        margin: 0 auto;
        position: relative;
        height: 20px;
        font-family: 'Oswald', sans-serif;
    }
    
    .deadline-days .inner {
        width: 100px;
        position: relative;
        top: 0;
        left: 0;
    }
    
    .mask-red,
    .mask-white {
        position: absolute;
        top: 0;
        width: 100%;
        overflow: hidden;
        height: 100%;
    }
    
    .mask-red {
        left: 0;
        width: 0;
        color: #BE002A;
        animation: text-red 20s ease infinite;
        z-index: 2;
        background: #000;
    }
    .mask-white {
        right: 0;
    }
    
    /* Flames */
    
    #red-flame {
        opacity: 0;
        animation: show-flames 20s ease infinite, red-flame 120ms ease infinite;
        transform-origin: center bottom;
    }
    
    #yellow-flame {
        opacity: 0;
        animation: show-flames 20s ease infinite, yellow-flame 120ms ease infinite;
        transform-origin: center bottom;
    }
    
    #white-flame {
        opacity: 0;
        animation: show-flames 20s ease infinite, red-flame 100ms ease infinite;
        transform-origin: center bottom;
    }
    
    @keyframes progress-fill {
        0% {
            x: -100%;
        }
    
        100% {
            x: -3%;
        }
    }
    
    @keyframes walk {
        0% {
            transform: translateX(0);
        }
        6% {
            transform: translateX(0);
        }
        10% {
            transform: translateX(100px);
        },
    
        15% {
            transform: translateX(140px);
        }
    
        25% {
            transform: translateX(170px);
        }
    
        35% {
            transform: translateX(220px);
        }
    
        45% {
            transform: translateX(280px);
        }
    
        55% {
            transform: translateX(340px);
        }
    
        65% {
            transform: translateX(370px);
        }
    
        75% {
            transform: translateX(430px);
        }
    
        85% {
            transform: translateX(460px);
        }
    
        100% {
            transform: translateX(520px);
        }
    }
    
    @keyframes move-arm {
        0% {
            transform: rotate(0);
        }
    
        5% {
            transform: rotate(0);
        }
    
        9% {
            transform: rotate(40deg);
        }
    
        80% {
            transform: rotate(0);
        }
    }
    
    @keyframes move-tool {
        0% {
            transform: rotate(0);
        }
    
        5% {
            transform: rotate(0);
        }
    
        9% {
            transform: rotate(50deg);
        }
    
        80% {
            transform: rotate(0);
        }
    }
    
    /* Design animations */
    
    @keyframes write {
        0% {
            transform: translate(0, 0) rotate(0deg) scale(1, 1);
        }
    
        16% {
            transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1);
        }
    
        32% {
            transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
        }
    
        48% {
            transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1);
        }
    
        65% {
            transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
        }
    
        83% {
            transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1);
        }
    }
    
    @keyframes text-red {
        0% {
            width: 0%;
        }
    
        100% {
            width: 98%;
        }
    }
    
    /* Flames */
    
    /* @keyframes show-flames {
        0% {
            transform:  translateY(0);
        }
        74% {
            transform:  translateY(0);
        }
        80% {
            transform:  translateY(-30px);
        }
        97% {
            transform:  translateY(-30px);
        }
        100% {
            transform: translateY(0px);
        }
    } */
    
    @keyframes show-flames {
        0% {
            opacity: 0;
        }
        74% {
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
        99% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    
    @keyframes red-flame {
        0% {
            transform: translateY(-30px) scale(1, 1);
        }
    
        25% {
            transform: translateY(-30px) scale(1.1, 1.1);
        }
    
        75% {
            transform: translateY(-30px) scale(0.8, 0.7); 
        }
    
        100% {
            transform: translateY(-30px) scale(1, 1); 
        }
    }
    
    @keyframes yellow-flame {
        0% {
            transform: translateY(-30px) scale(0.8, 0.7);
        }
    
        50% {
            transform: translateY(-30px) scale(1.1, 1.2);
        }
    
        100% {
            transform: translateY(-30px) scale(1, 1);
        }
    }
</style>

<script>
    // Init
    var $ = jQuery;
    var animationTime = 20,
        days = 7;
     
    $(document).ready(function(){
    
        // timer arguments: 
        //   #1 - time of animation in mileseconds, 
        //   #2 - days to deadline
    
        $('#progress-time-fill, #death-group').css({'animation-duration': animationTime+'s'});
    
        var deadlineAnimation = function () {
            setTimeout(function(){
                $('#designer-arm-grop').css({'animation-duration': '1.5s'});
            },0);
    
            setTimeout(function(){
                $('#designer-arm-grop').css({'animation-duration': '1s'});
            },4000);
    
            setTimeout(function(){
                $('#designer-arm-grop').css({'animation-duration': '0.7s'});
            },8000);
    
            setTimeout(function(){
                $('#designer-arm-grop').css({'animation-duration': '0.3s'});
            },12000);
    
            setTimeout(function(){
                $('#designer-arm-grop').css({'animation-duration': '0.2s'});
            },15000);
        };
    
        function timer(totalTime, deadline) {
            var time = totalTime * 1000;
            var dayDuration = time / deadline;
            var actualDay = deadline;
    
            var timer = setInterval(countTime, dayDuration);
    
            function countTime() {
                --actualDay;
                $('.deadline-days .day').text(actualDay);
    
                if (actualDay == 0) {
                    clearInterval(timer);
                    $('.deadline-days .day').text(deadline);
                }
            }
        }
    
        var deadlineText = function () {
            var $el = $('.deadline-days');
            var html = '<div class="mask-red"><div class="inner">' + $el.html() + '</div></div><div class="mask-white"><div class="inner">' + $el.html() + '</div></div>';
            $el.html(html);
        }
    
        deadlineText();
    
        deadlineAnimation();
        timer(animationTime, days);
    
        setInterval(function(){
            timer(animationTime, days);
            deadlineAnimation();
    
            console.log('begin interval', animationTime * 1000);
    
        }, animationTime * 1000);
    
    });
</script>

 

以下是代码来源：

以下的代码来自有意思的进度条 – 死神来了 | 菜鸟工具 

喜欢这个内容吗？如果是的话，请点赞或赞赏吧！

47bf7f14d60f433ba2230af038b8d751.png

【HTML】有趣的代码合集（附源码）
克隆窝
02-01 6090
这是一款很有意思的HTML5 Canvas时间动画，总体来说，它是一个可以和客户端同步的时钟，其特点是当时间走动时，数字将会散落成一个个粒子动画，这种HTML5 Canvas动画在之前也有分享过，比如这个HTML5粒子文字特效。
制作html css 步骤进度条（完整代码）
WordPress主题大全
03-20 3286
在这个例子中，步骤进度条由一个进度条和一系列用文本表示的步骤组成。进度条将根据当前活动的步骤改变宽度，步骤的外观将根据它们是否处于活动状态而改变。您可以根据需要调整宽度、颜色和字体大小值，以自定义步骤进度条的外观。这将创建一个带有进度条和圆圈元素的基本步骤条来表示每个步骤。上一个和下一个按钮可用于在步骤之间导航，步骤栏的外观将根据当前活动步骤动态更新。
HTML5漂亮的进度条
02-07
很漂亮的HTML5进度条，源代码简单，可以参考参考
通过HTML/CSS 实现各类进度条的功能。
最新发布
qq_44552416的博客
07-19 8447
需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用。通过本文学习我们会明白如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。
9个绚丽多彩的HTML5进度条动画赏析
weixin_34360651的博客
01-18 445
进度条在网页应用中越来越广泛了，特别是现在的页面异步局部刷新时代，进度条可以让用户更好的等待操作结果。本文要分享9款绚丽多彩的HTML5进度条动画，有很多还是挺实用的，效果也非常不错。 1、CSS3发光进度条动画 超炫酷的样式 这次我们要来分享一款非常炫酷的CSS3进度条动画，其样式风格类似于星球大战里面的那些激光剑效果。页面初始化时，可以设定进度条的值，但是我们也可以利用其配套的借口来动态改...
HTML CSS 进度条
无心使然云中漫步
12-17 3960
进度百分比不是类似于 0°、90°、180°、270°、360° 这类数字时，使用圆锥渐变时，不同颜色间的衔接处会有明显的锯齿。描述 progress 元素所表示的任务一共需要完成多少工作量，如果不需要进度条渐变，只需要指定渐变颜色为同一颜色即可。，而如果要展示汽车仪表盘当前的速度值，应该使用。）不支持过渡变换的，因此.progress增加。比如，一个需求当前的完成度，应该使用。解决方案：使用CSS@property。存在问题：CSS中，渐变（比如。思路：使用背景色配合百分比。，不会有过渡动画效果。
进度条
sun_gufeng的专栏
05-28 153
Progress Bar #graph{ width:450px; border:1px solid #F8B3D0; height:25px; } #b...
HTML+css制作简易进度条
09-28
首先，要制作一个简易进度条，我们需要编写HTML代码。在HTML代码中，我们通常会定义一个容器元素，比如`<div>`元素，用于包裹进度条的可视部分。接着，在容器元素内部，使用一个子元素（通常是另一个`<div>`）来表示...
进度条、对话框设计.rar_java 制作 进度条_java 进度条_组合框_组合框 颜色_进度条
09-14
进度条的设计,掌握颜色选择器对话框的使用,文件选择器对话框的使用,使用JOptionPane类创建对话框,通过制作“设置字体”对话框，掌握列表框、单选按钮、组合框等组件的使用,了解打包工具JAR的使用
html javascript js制作加载进度条.loading
01-28
html js制作加载进度条.zip
HTML+CSS制作的进度条
03-10
利用纯HTML+CSS制作的进度条，很漂亮的
html 一个简单的进度条
weixin_45004942的博客
05-10 1691
直接上代码： Document ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210510104311435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwNDk0Mg==,size_16,color_FFFFFF,t_70#pic
html 进度条
竹毛言己
04-19 2565
【代码】html 进度条。
进度条 html css,时尚的CSS3进度条
weixin_42431577的博客
06-07 367
时尚的CSS3进度条先看效果图，非常漂亮吧：HTML代码：HTML代码比较简单[cc lang=”html” width=”630″][/cc].progress-bar – 定义进度栏的常规样式。.blue – 定义进度条的风格，这里是蓝色的.stripes – 当前进度的动画类型。span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。CCS代码：[cc lang=”css” ...
HTML实现进度条
alpha105的博客
01-06 3454
HTML实现进度条
HTML5使用＜progress＞进度条、＜meter＞刻度条
pan_junbiao的博客
07-06 1289
定义进度信息使用的是 progress 标签。它表示一个任务的完成进度，这个进度可以是不确定的，只是表示进度正在进行，但是不清楚还有多少工作量没有完成，也可以用0到某个最大数字（如：100）之间的数字来表示准确的完成情况（如：进度百分比）。表示已经完成了多少工作量表示总共有多少工作量在网页中使用 progress 标签添加进度条。
HTML进度条的制作
pan_junbiao的博客
09-30 6056
HTML进度条的制作 1、HTML代码 经验值： &lt;span class="progress-bar"&gt;&lt;b style="width:50px;"&gt; &lt;/b&gt;&lt;/span&gt; 2、CSS样式 .progress-bar, .progress-bar b{background: url("/images/ico.png") no
html与css实现炫酷进度条
2305_76372875的博客
02-20 492
进度条演示
【前端纯html实现一个简单的进度条】
qq_46258455的博客
03-15 1082
使用html标签，progress进度指示元素，来写一个简单的进度条。value是进度条的值，max是进度条为100%时的值。
通过HTML5和jQuery制作可控圆形进度条示例
创建一个简单的圆形进度条，我们首先需要在HTML中添加一个`canvas`元素： ```html <canvas id="progressCanvas" width="150" height="150"></canvas> ``` 然后使用jQuery和JavaScript的`<canvas>` API来绘制和更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值