登录  /  注册

利用css3动画和border来实现圆形进度条_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:32:18
原创
1312人浏览过

最近在学习前端的一些知识,发现border的功能十分强大啊!

首先来看看demo

就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少

这个主要是利用border,旋转和css动画来实现的,主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形,再利用旋转div的角度来调整显示

上代码:

html+css+js(这里引入了jquery)

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <meta name="KeyWord" content="cicle,learning">        <meta name="description" content="cicle-learning">        <meta name="Author" content="alsy">        <title>圆形进度条</title>        <!-- style-start -->                    <!-- style-end -->        <style>            .content {                width: 400px;                height: 400px;                margin: 10px auto 100px;            }            .content .input{                position: relative;                margin: 40px auto;            }            .content .cicle {                position: relative;                margin: 100px auto;                width: 100px;                height: 100px;                border-width: 20px;                border-color: red;                border-style: solid;                border-radius: 50%;            }            .content .cicle .bar {                position: absolute;                width: 70px;                height: 140px;                overflow: hidden;            }            .content .cicle .bar-left {                top: -20px;                left: -20px;            }            .content .cicle .bar-left .bar-left-an{                position: absolute;                z-index: 10;                width: 100px;                height: 100px;                border-width: 20px;                border-color: transparent transparent green green;                border-style: solid;                border-radius: 50%;                transform: rotate(-135deg);            }            .content .cicle .bar-right {                top: -20px;                left: 50px;            }            .content .cicle .bar-right .bar-right-an {                position: absolute;                left: -70px;                z-index: 20;                width: 100px;                height: 100px;                border-width: 20px;                border-color: green green transparent transparent;                border-style: solid;                border-radius: 50%;                transform: rotate(-135deg);            }            .content .cicle .tx {                position: absolute;                width: 100px;                height: 100px;                line-height: 100px;                text-align: center;                font-size: 20px;                font-weight: 800;                color: green;            }        </style>    </head>    <body>    <div class="content">        <div class="input">            <label>进度条:</label><input type="text" id="inp"/>        </div>        <div class="cicle">            <div class="bar bar-left">                <div class="bar-left-an"></div>            </div>            <div class="bar bar-right">                <div  class="bar-right-an"></div>            </div>            <div class="tx">0%</div>        </div>    </div>                <!-- import-js -->            <script type="text/javascript" src="js/jquery.js"></script>        <!-- import-my-js -->                        <script type="text/javascript">                $(document).ready(function() {                    var cicle = cle = function() {                                                var oTx = $(".tx");                        var cicleTransform = function(num, old_num) {                            var b_l_a = $(".bar-left-an");                            var b_r_a = $(".bar-right-an");                            var c_num = num;                            if(c_num > 50) {                                b_r_a.css({                                    "transform": "rotate(45deg)",                                    "transition": "transform 1s linear"                                });                                setTimeout(function() {                                    b_l_a.css({                                        "transform": "rotate(" + (((c_num-50)/100*360)-135) + "deg)",                                        "transition": "transform 1s linear"                                    });                                },1000);                            } else {                                if(old_num > 50) {                                    setTimeout(function() {                                        b_r_a.css({                                            "transform": "rotate(" + ((c_num/100*360)-135) + "deg)",                                            "transition": "transform 1s linear"                                        });                                    },1000);                                    b_l_a.css({                                        "transform": "rotate(-135deg)",                                        "transition": "transform 1s linear"                                    });                                } else {                                    b_r_a.css({                                        "transform": "rotate(" + ((c_num/100*360)-135) + "deg)",                                        "transition": "transform 1s linear"                                    });                                }                                                            }                        }                        var setnum = function(num) {                            oTx.text(num + "%");                        }                        var getnum = function() {                            return parseInt(oTx.text());                        }                        var inputB = function() {                            $("#inp").blur(function() {                                var num = parseInt($.trim( $(this).val() ));                                if(num>=0 && num <= 100){                                    cicleTransform(num, getnum());                                    setnum(num);                                }else{                                    alert("输入100以内的数值!");                                }                            });                        }                                                return {                            init: function() {                                inputB();                            }                        }                    }();                    cicle.init();                });            </script>    </body></html>
登录后复制

 

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号