利用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%,则将闪 ...
随机推荐
- android系统自带图标集合（android.R.drawable查看）
alert_dark_frame alert_light_frame arrow_down_float arrow_up_float bottom_bar btn_default btn_defaul ...
- oscgit
Gitlab PaaS项目演示 git config --global user.name "你的名字或昵称" git config --global user.email &qu ...
- CSS modules 与 React中实践
最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的. 目前学到css绑定的问题,看到有一篇好的文章,就转过来了. CSS 模块化的解决方案有很多,但主要有两类.一类是彻底抛弃 CS ...
- Volley使用指南第一回（来自developer.android）
最近闲来想看看android网络方面的东西.google在2013年发布了一个叫做Volley的网络请求框架,我看了一下官网,居然在training里面就有教程.首先,英文的东西看着 还是挺不爽的,特 ...
- ZZTHX-线程锁
以前一直在做卡乐付,悲剧的是项目中的余额查询,超级转账和刷卡器相关的东西已经开发好了,我对这块还是比较好奇和感兴趣的,在项目空闲的时候我就开始尝试熟悉和了解这块的业务和代码.实践出真理,只有在实践中才 ...
- SQL Server磁盘I/O性能分析
SQL Server中的I/O操作类型: 1.对于内存中没有缓存的数据,第一次访问时需要将数据从所在的页面从数据文件中读取到内存中 2.在任何Insert/Update/Delete提交前,SQL S ...
- HDU 3452 Bonsai(网络流之最小割）
题目地址:HDU 3452 最小割水题. 源点为根节点.再另设一汇点,汇点与叶子连边. 对叶子结点的推断是看度数是否为1. 代码例如以下: #include <iostream> #inc ...
- cocos2dx windows phone平台下CCLabelTTF自己主动换行的实现(2)
前几天发过一篇文章说怎样实现wp8下的CCLabelTTF怎样自己主动换行,后来发现果如预料的那般.效果非常不好.主要是非等宽字体的情况下看着非常糟心.因此再改动了一版.效果要好非常多了. 详细实现事 ...
- hellogcc -100GDB技巧
https://github.com/hellogcc/100-gdb-tips/blob/master/README.md
- [设计模式1]--单例模式(SINGLETON)
搞笑解释: 俺有6个漂亮的老婆,她们的老公都是我,我就是我们家里的老公Sigleton,她们只要说道“老公”,都是指的同一个人,那就是我 定义: 单例模式确保某一个类只有一个实例,而且自行实例化并向整 ...