最近在学习前端的一些知识，发现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>

利用css3动画和border来实现圆形进度条的更多相关文章

  1. CSS3动画：YouTube的红色激光进度条

    本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个. 之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相 ...

  2. 兼容ie8的圆形进度条

    主要是利用html5中的svg 画出圆形进度条 并且兼容ie8 https://github.com/GainLoss/Circular-progress-bar

  3. WPF利用动画实现圆形进度条

    原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...

  4. 移动端纯CSS3制作圆形进度条所遇到的问题

    近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

  5. 微信小程序动画之圆形进度条

    微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...

  6. 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画

    通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2 ...

  7. 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】

    初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下C ...

  8. vue 圆形进度条组件解析

    项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...

  9. Google Chrome 圆形进度条

    Conmajia © 2012 Updated on Feb. 21, 2018 Google Chrome 的圆形进度条. Demo 功能 显示百分比(0-100).如果进度值达到 100%,则将闪 ...

随机推荐

  1. git安装教程

    msysgit是Windows版的Git,从https://git-for-windows.github.io下载(网速慢的同学请移步国内镜像),然后按默认选项安装即可. 安装完成后,在开始菜单里找到 ...

  2. EasyUI datagrid自适应问题解决

    在使用js 动态创建EasyUI datagrid时,如果设置fit为true,在显示的时候数据的高度为固定高度不能自适应 解决办法是把fit设为false. 但这样设置后又有个问题,如果把colum ...

  3. html中#include file的使用方法

    有两个文件a.htm和b.htm,在同一文件夹下a.htm内容例如以下 <!-- #include file="b.htm" --> b.htm内容例如以下 今天:雨 ...

  4. [Bootstrap] 3. Responsive Gridding (.hidden-sm, visible-md)

    Grid Size For .col-md We started designing our site using the col-md-* classes. These classes target ...

  5. iOS使用宏写单例

    本文只介绍ARC情况下的单例 过去一直背不下来单例如何写,就是知道这么回事,也知道通过宏来写单例,但是一直记不住,今天就来记录一下 - (void)viewDidLoad {     [super v ...

  6. ios开发——实战OC篇&SQLite3的实际应用

    SQLite3的实际应用 前面的文章中介绍了SQlite,并且介绍了他的各种语法及使用方法. 但是没有正在项目中使用特,今天就开始做一个小小的实例,就是使用SQLite3来实现数据库的相应操作并且把他 ...

  7. TOP30专访：捕鱼达人陈昊芝

    原文:http://www.csdn.net/article/2012-04-04/313919/1 编者按:3月31日,第四届CocoaChina游戏开发者大会暨Cocos2D-X技术研讨会在北京举 ...

  8. rem移动端适配

    rem作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The f ...

  9. 属性文件Plist

    属性文件: Property List File:简称plist 概念iOS开发中常见的一种文件格式.按照固定格式保存数据. 属性文件和XML文件都属性结构化文件.文件的内容按指定的格式保存数据. 作 ...

  10. Linux上安装Redmine

    安装基本的软件环境 # yum install zip unzip libyaml-devel zlib-devel curl-devel openssl-devel httpd-devel apr- ...