找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发环形进度条

2018-10-19 分类：教程 阅读(627) 评论(0)
浅析web前端开发技术
web前端开发技术 大纲
web前端开发技术期末填空题

这两天试了很多种方式下的环形进度条，一开始是想用切割，但是发现写出来后有点bug
html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”>
<link>
<meta name=”page-view-size” content=”640*530″>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<style>
    * {
        position: absolute;
        left: 100px;
        top: 100px;
        box-sizing: border-box;
    }
    .circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 5px solid red;
    }
    .rect_left {
        width: 50px;
        height: 100px;
        background: white;
        transform-origin: 50px 5px;
        animation: roll_left 10s linear 10s 1 forwards;
    }
    .rect_right {
        left: 150px;
        width: 50px;
        height: 100px;
        background: white;
        transform-origin: 0px 95px;
        animation: roll_right 10s linear 0s 1 forwards;
    }
    @keyframes roll_right {
        0% {
            transform: rotate(0deg);
            clip: rect(0px 50px 100px 0px);
        }
        20% {
            transform: rotate(20deg);
            clip: rect(0px 50px 100px 0px);
        }
        50% {
            transform: rotate(50deg);
            clip: rect(50px 50px 100px 0px);
        }
        90% {
            transform: rotate(90deg);
            clip: rect(90px 50px 100px 0px);
        }
        100% {
            transform: rotate(90deg);
            clip: rect(100px 50px 100px 0px);
        }
    }
    @keyframes roll_left {
        0% {
            transform: rotate(0deg);
            clip: rect(0px 50px 100px 0px);
        }
        20% {
            transform: rotate(20deg);
            clip: rect(0px 50px 100px 0px);
        }
        50% {
            transform: rotate(50deg);
            clip: rect(0px 50px 40px 0px);
        }
        90% {
            transform: rotate(90deg);
            clip: rect(0px 50px 10px 0px);
        }
        100% {
            transform: rotate(90deg);
            clip: rect(0px 50px 0px 0px);
        }
    }
</style>
<body leftmargin=”0″ topmargin=”0″>
    <div class=”circle”></div>
    <div class=”rect_left”></div>
    <div class=”rect_right”></div>
</body>
</html>

这个是有bug的 衔接得不是很完美啊。总感觉怪怪的。。。。 我也不知道怎么改下去了。。、、、
百度了一下，得到一种新思路。、、

html 代码

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<link>
<meta name=”page-view-size” content=”640*530″>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
</head>
<style>
    .wapper {
        position: absolute;
        left: 100px;
        top: 100px;
        box-sizing: border-box;
    }
    .rect {
        position: absolute;
        width: 50px;
        height: 100px;
        overflow: hidden;
    }
    .right {
        left: 50px;
    }
    .circle {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 5px solid transparent;
        border-top: 5px solid indianred;
    }
    .circle_right {
        left: -50px;
        border-left: 5px solid indianred;
        transform: rotate(-45deg);
        animation: roll_right 5s linear 0s 1 forwards;
    }
    .circle_left {
        border-right: 5px solid indianred;
        transform: rotate(45deg);
        animation: roll_left 5s linear 5s 1 forwards;
    }
    @keyframes roll_right {
        0% {
            transform: rotate(-45deg)
        }
        100% {
            transform: rotate(135deg)
        }
    }
    @keyframes roll_left {
        0% {
            transform: rotate(45deg)
        }
        100% {
            transform: rotate(225deg)
        }
    }
</style>
<body leftmargin=”0″ topmargin=”0″>
    <div class=”wapper”>
        <div class=”rect right”>
            <div class=”circle circle_right”></div>
        </div>
        <div class=”rect left”>
            <div class=”circle circle_left”></div>
        </div>
    </div>
</body>
</html>

果然是个好思路。后面我觉得还有更简便的写法，可以用clip来做。
html 代码

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<link>
<meta name=”page-view-size” content=”640*530″>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
</head>
<style>
    .wapper {
        position: absolute;
        left: 100px;
        top: 100px;
        box-sizing: border-box;
    }
    .rect {
        position: absolute;
        width: 50px;
        height: 100px;
        overflow: hidden;
    }
    .right {
        left: 50px;
    }
    .circle {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 5px solid indianred;
    }
    .circle_right {
        left: -50px;
        clip: rect(0px 50px 100px 0px);
        animation: roll 5s linear 0s 1 forwards;
    }
    .circle_left {
        clip: rect(0px 100px 100px 50px);
        animation: roll 5s linear 5s 1 forwards;
    }
    @keyframes roll {
        0% {
            transform: rotate(0deg)
        }
        100% {
            transform: rotate(180deg)
        }
    }
</style>
<body leftmargin=”0″ topmargin=”0″>
    <div class=”wapper”>
        <div class=”rect right”>
            <div class=”circle circle_right”></div>
        </div>
        <div class=”rect left”>
            <div class=”circle circle_left”></div>
        </div>
    </div>
</body>
</html>

ok了。至此简便的环形进度条就出来了~

web前端开发新技术
前端开发技术树
web前端开发技术 答案
赞(1)
前端开发者 » 前端开发环形进度条
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论