利用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%,则将闪 ...
随机推荐
- JavaScript要点（十三） HTML DOM EventListener
addEventListener() 方法 <body> <p>该实例使用 addEventListener() 方法在按钮中添加点击事件. </p> <bu ...
- 手把手教你入门mac idea
一.前沿 去年入职后, 公司有很多人使用的是idea , 而不是eclipse. 之前就想转向idea, 但一直没转过来~~原因是团队的人提倡用开源eclipse.现在下定决心转向idea. 虽然, ...
- CAS Proxy 的相关文章
cas代理模式的原理及配置 http://my.oschina.net/mashiguang/blog/69312 剖析CAS Proxy的设计原理 http://www.blogjava.net/s ...
- 修改 suse 上的postfix 的日志路径
刚刚搭建的邮件服务器,没过多久硬盘就爆满了,不得已移动存储,包括日志. 移动存储灰常简单,查找 /etc/postfix/main.cf 中的 data_directory / base_direct ...
- 2014 ACM/ICPC 鞍山赛区现场赛 D&I 解题报告
鞍山现场赛结束了呢-- 我们出的是D+E+I三道题-- 吾辈AC掉的是D和I两道,趁着还记得.先在这里写一写我写的两道水题D&I的解题报告吧^_^. D题的意思呢是说星云内有一堆排成一条直线的 ...
- 在LiteIDE 中增加build 的参数
问题: go build 时候其实可以带参数的,但是我们直接运行liteIDE 就找不到 特别对于 Walk 这个gui 需要 -ldflags="-H windowsgui" 把 ...
- [Practical Git] Diagnose which commit broke something with git bisect
Sometimes you find a bug in your project that has been around for a while without being noticed; it ...
- Objective-C Runtime之着魔的UIAlertView
前言: 上篇文章写的是Runtime的一个入门教程,刚哥问我那个Associated Objects加回调是啥时候用,那我就来告诉你啦!我们在使用UIAlertView的时候用的多. 传统的UIAle ...
- oracle 不转义 &
在为表加注释,遇到有些注释包含'&' 但又不想写eacape, 在sqlplus下,set define off 即可将&输入到数据库中.
- Oracle SQL Developer 操作
.新建 数据库连接 菜单->文件->新建 ->新建数据库连接 ->连接名: 用户名:userA 口 令: 连接类型:基本/.. 角色:默认值/SYSDBA 主机名:localh ...