利用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%,则将闪 ...
随机推荐
- openstack系列阅读目录
一 keystone系列 keystone基础 网关协议cgi,fastcgi,wsgi,uwsgi keystone源码分析 keystone部署及使用 keystone客户端工作介绍 二 glan ...
- java.lang.UnsupportedClassVersionError: Bad version number in .class file 解决办法
java.lang.UnsupportedClassVersionError: Bad version number in .class file 造成这种错误的原因是支撑Tomcat运行的JDK版本 ...
- U盘安装SLES的方法
安装准备: 一个4G 或 大于4G的U盘 也同样适合移动硬盘, SLES-11-DVD-i586-GM-DVD1.iso 文件1) 将U盘格式化成FAT32格式; 2) 下载 syslinux工具 h ...
- 放弃移动版Flash而非AIR
之前看到标题为"Adobe放弃移动版flash"的新闻,我很震惊,为何Adobe会放弃这么一个大市场呢? 这样无疑打击原来在flash的开发上的应用,我想很多人和我想的一样,fla ...
- android学习日记06--SurfaceView视图
一.API关SurfaceView的介绍 SurfaceView是视图(View)的继承类,这个视图里内嵌了一个专门用于绘制的Surface.你可以控制这个Surface的格式和尺寸.Surfacev ...
- zend studio 安装xdebug
XDebug安装 到http://xdebug.org/download.php选择自己需要的xdebug版本.然后按照下面的配置建立目录.并在php.ini加入这些内容.重启server 注意xde ...
- Mysql字符集设置 2 图
基本概念 • 字符(Character)是指人类语言中最小的表义符号.例如'A'.'B'等: • 给定一系列字符,对每个字符赋予一个数值,用数值来代表对应的字符,这一数值就是字符的编码(Encodin ...
- 学习笔记之APACHE ANT
http://baike.baidu.com/link?url=KkOWkH_nMVJRbd4oj-aIHMVL4HR-s7fqm3i2brUcZzBinwUXjZgzPcYIWz5qFNNvjait ...
- 使用 Eclipse 的 Navigator Link Helper 实现导航器与编辑器的关联
概要 Link With Editor 是 Eclipse 内置功能中十分小巧,但却异常实用的一个功能.这个开关按钮 (Toggle Button) 出现在各式导航器视图 ( 例如 Resource ...
- 自定义控件（视图）1期笔记01：View 和 ViewGroup
1.View 和 ViewGroup 图解关系: 2. View 和 ViewGroup 关系和作用: (1) 关系: • 继承关系 • 组合关系 (2) 作用: • View的作用: 提供 ...