css3--根据数据加载显示的一个动画
css:
.circle {
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
background: #0cc;
}
.pie_left, .pie_right{
width:200px;
height:200px;
position: absolute;
border-radius: 50%;
top: 0px;left: 0px;
background: #ccc;
}
.pie_right {
clip:rect(0,auto,auto,100px);
}
.pie_left {
clip:rect(0,100px,auto,0);
}
.mask {
width: 180px;
height: 180px;
border-radius: 50%;
left: 10px;
top: 10px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 180px;
font-size: 36px;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="circle">
<div class="pie_left"></div>
<div class="pie_right"></div>
<div class="mask"><span>100</span>%</div>
</div>
</body>
</html>
jQuery:
$(function() {
if( $('.mask span').text() <= 50 ){
$('.pie_right').css('transform','rotateZ('+($('.mask span').text()*3.6)+'deg)');
}else {
$('.pie_left').css('transform','rotateZ('+(($('.mask span').text()-50)*3.6)+'deg)');
$('.pie_right').css('background','#0cc');
}
})
基本原理：
最外侧的div是背景是进度条的颜色，
其中间有三个div盒子，分别是左侧，右侧，显示百分比的区域。
左侧和右侧分别使用clip属性对其进行裁剪。
通过js进行旋转。
当值小于50的时候右侧的旋转：值*3.6+deg；
当值大于50的时候左侧旋转的度数为：值-50*3.6+deg;
css3--根据数据加载显示的一个动画的更多相关文章
- cocos2d中如何使用图片纹理图集的加载来实现一个动画的功能
cocos2d中要实现一个动画,一般采用纹理图集的方式,也就是说把几个连续动作的图片挨个显示切换这样就是动画 一: 首先先看下今天要实现的具体的目的,打飞机的时间屏幕上会有一个喷火的小飞机,飞机的尾部 ...
- 通过css3，实现加载转动贝塞尔曲线动画
参考博客:http://blog.jobbole.com/94966/ css代码: .loading { position : relative; display : inline-block; w ...
- 一个页面从输入url到页面加载显示完成，中间都经历了什么
第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...
- 一个页面从输入URL到加载显示完成，发生了什么？
面试经典题--URL加载 一.涉及基本知识点: 1. 计算机网络 五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...
- Android 7.0 Gallery图库源码分析3 - 数据加载及显示流程
前面分析Gallery启动流程时,说了传给DataManager的data的key是AlbumSetPage.KEY_MEDIA_PATH,value值,是”/combo/{/local/all,/p ...
- 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.
一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...
- 微信小程序云开发-列表数据分页加载显示
一.准备工作 1.创建数据库nums,向数据库中导入108条数据 2.修改数据库表nums的权限 二.新建页面ListPaginated 1.wxml文件 <!-- 显示列表数据 --> ...
- ScrollView嵌套ListView,GridView数据加载不全问题的解决
我们大家都知道ListView,GridView加载数据项,如果数据项过多时,就会显示滚动条.ScrollView组件里面只能包含一个组件,当ScrollView里面嵌套listView,GridVi ...
- flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
随机推荐
- iOS 集成Protobuf,转换proto文件
原文地址:http://blog.csdn.net/hyq4412/article/details/54891038 附加Homebrew安装地址:https://brew.sh/index_zh-c ...
- mysql优化篇之表分区
当表的数据量达到一定数量时(如单个.myd文件都达到10G,myd 是mysql的数据文件),这时候读取起来必然效率很低. 1.从业务角度可以解决(分表) ...
- Kubernetes1.5 集成Heapster
Kubernetes1.5 集成Heapster Heapster是kubernetes集群监控工具.在1.2的时候,kubernetes的监控需要在node节点上运行cAdvisor作为agent收 ...
- Git强制覆盖master分支
在开发中,通常会保持两个分支master分支和develop分支,但是如果因为develop上面迭代太多而没有及时维护master,最后想丢弃master而直接将测试确认过的develop强推到mas ...
- python 进阶：修饰器的介绍
参考链接:Python 函数装饰器 我认为python中的装饰器是一个很厉害的功能,他能瞬间提升代码的逼格,但对于我这样的小白来说,别说为所欲为的使用了,就连简单的尝试一下,却也是难于登天.经过长达半 ...
- 紫书 习题 10-3 UVa 1643（计算几何 叉乘）
直观感觉对角线重合的时候面积最大 然后可以根据方程和割补算出阴影部分的面积 注意知道两点坐标,可以求出与原点形成的三角形的面积 用叉乘,叉乘的几何意义以这两个向量为边的平行四边形的面积 所以用叉乘除以 ...
- 关于App程序猿泡沫
前言 做开发快七年了,对于程序猿,外行人总有着数不完的讽刺和误解,可是我都懒得去解释.代码搬运工人也好,民工也罢,随他们去说吧.可是网上近期流传的程序猿泡沫,尤其是APP程序猿泡沫的文章导致非常多我们 ...
- Exchange2003迁移2010DAG的权限问题
exchange2010无法删除用户.在2010的控制台中新建一个通讯组.然后将它删除就会报告下面错误. MicrosoftExchange 错误:无法对对象"test"执行&qu ...
- [2012山东省第三届ACM大学生程序设计竞赛]——Mine Number
Mine Number 题目:http://acm.sdut.edu.cn/sdutoj/problem.php? action=showproblem&problemid=2410 Time ...
- Android程序猿自己动手制作.9.png图片
1:怎样制作9.png图片素材: 打开SDK工具文件夹下: draw9patch.zip 解压执行draw9patch.bat.有的直接搜索会有:draw9patch.bat. 双击执行后,例如以下 ...