利用css3动画和border来实现圆形进度条
最近在学习前端的一些知识，发现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来实现圆形进度条的更多相关文章
- CSS3动画：YouTube的红色激光进度条
本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个. 之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相 ...
- 兼容ie8的圆形进度条
主要是利用html5中的svg 画出圆形进度条 并且兼容ie8 https://github.com/GainLoss/Circular-progress-bar
- WPF利用动画实现圆形进度条
原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...
- 移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
- 微信小程序动画之圆形进度条
微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画
通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2 ...
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】
初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下C ...
- vue 圆形进度条组件解析
项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...
- Google Chrome 圆形进度条
Conmajia © 2012 Updated on Feb. 21, 2018 Google Chrome 的圆形进度条. Demo 功能 显示百分比(0-100).如果进度值达到 100%,则将闪 ...
随机推荐
- C#操作符的重载
操作符也是可以重载的,先总结一下操作符的性质: 如我们所知,操作符在不同的情况下有不同的语义,具体取决于它所操作的类型.例如,操作符“+”在操作数值类型的时候意味着“加”,在操作字符串时意味着“连接” ...
- iOS开发-分页栏和选取器的使用
一.分页栏 创建一个新的项目,Subclass of的值选中UIViewController,然后在storyboard中删除根视图,在右下方拖出一个Tab Bar Controller 新增分页,只 ...
- 四、Socket之UDP异步传输文件-用控件显示文件传输进度
上一篇文章三.Socket之UDP异步传输文件中,实现了多文件的传输和MD5校验,还显示了文件传输过程中的信息,在这一篇文章中,将介绍怎样实现传输文件的进度显示和实现选择保存文件路径. 首先,来实现一 ...
- 【转】C++ char数组转化为string
有很多种方法: 假设c字符串定义为char ch[]="hello world!"; 1.向构造函数传入c字符串创建string对象: string str(ch); 2.使用拷贝 ...
- Using zend-navigation in your Album Module
Using zend-navigation in your Album Module In this tutorial we will use the zend-navigation componen ...
- 1、C语言中的函数指针
一 通常的函数调用 void MyFun(int x); //此处的申明也可写成:void MyFun( int ); int main(int argc, char* argv[]) { MyFun ...
- CreateToolhelp32Snapshot
CreateToolhelp32Snapshot CreateToolhelp32Snapshot函数为指定的进程.进程使用的堆[HEAP].模块[MODULE].线程[THREAD])建立一个快照[ ...
- [转]在BBB启动时自动加载dtbo（或执行脚本、运行程序）
启动时自动加载dtbo,实际上就是做了一个cape.官方推荐的方法是用eeprom来实现,请参考我的博文<为BBB制作专属自己的cape(一)>和<为BBB制作专属自己的cape(四 ...
- Fixflow引擎解析(三)(模型) - 创建EMF模型来读写XML文件
Fixflow引擎解析(四)(模型) - 通过EMF扩展BPMN2.0元素 Fixflow引擎解析(三)(模型) - 创建EMF模型来读写XML文件 Fixflow引擎解析(二)(模型) - BPMN ...
- 马上搞定Android平台的Wi-Fi Direct开发
导语 移动互联网时代,很多用户趋向于将大量的资料保存在移动设备上.但在给用户带来便利的同时引发了一个新的问题——保存在移动设备上的资料该怎样共享出去?到了思考时间,普通青年这样想:折腾什么劲啊,直接用 ...