css圆环百分比
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
} .yuanhaun {
width: 200px;
height: 200px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
border: 1px solid red;
position: relative;
border-radius: 50%;
} .huan1 {
background: red;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50%;
clip: rect(0px 200px 200px 100px);
width: 100%;
height: 100%;
z-index: 10;
} .huan1mask {
background: green;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50%;
clip: rect(0px 200px 200px 100px);
width: 100%;
height: 100%;
z-index: 100;
} .huan2 {
background: red;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50%;
clip: rect(0px 100px 200px 0px);
width: 100%;
height: 100%;
z-index: 10;
} .huan2mask {
background: green;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50%;
clip: rect(0px 100px 200px 0px);
width: 100%;
height: 100%;
z-index: 100;
} .text {
width: 160px;
height: 160px;
position: absolute;
top: 20px;
left: 20px;
background: yellow;
border-radius: 50%;
line-height: 160px;
text-align: center;
z-index: 200;
}
</style>
<script src="js/yuanhuan.js"></script>
<script type="text/javascript">
$(function() {
/*var du = parseInt($(".text").text());
if(du > 360) {
du = du % 360;
}
if(du % 360 == 0) {
$(".huan2mask,.huan1mask").hide();
} else if(du >= 180 && du < 360) {
$(".huan1mask").hide();
$(".huan1").css('z-index', "200");
$(".huan2mask").css("transform", 'rotate(' + (du - 180) + 'deg)');
} else if(du > 0 && du < 180) {
$(".huan1mask").css("transform", 'rotate(' + du + 'deg)');
}*/
$("#yuanhuan").yuanhuan();
})
</script>
</head> <body>
<div id="yuanhuan" class="yuanhaun">
<!--<div class="huan1"></div>
<div class="huan1mask"></div>
<div class="huan2"></div>
<div class="huan2mask"></div>
<p class="text">480</p>-->
</div>
</body> </html>
插件：
;
(function($) {
$.fn.yuanhuan = function(opt) {
var local_opt = {
width: "200px",
height: "200px",
autoplus: false,
time: 3,
du: "260度",
fun: function() {
console.log("is ok");
}
} var obj = $.extend({}, local_opt, opt);
var du = parseInt(obj.du);
var timer = parseInt(obj.time / du);
var html = '<div class="huan1"></div><div class="huan1mask"></div><div class="huan2"></div><div class="huan2mask"></div><p class="text"></p>';
$(this).html(html); var deg = 0;
var stln = setInterval(function() {
if(deg < du) {
aa(++deg);
} else {
clearInterval(stln);
obj.fun();
}
}, timer); function aa(du) {
if(du % 360 == 0) {
$(".huan2mask,.huan1mask").hide();
} else if(du >= 180 && du < 360) {
$(".huan1mask").hide();
$(".huan1").css('z-index', "200");
$(".huan2mask").css("transform", 'rotate(' + (du - 180) + 'deg)');
$('.text').text(du);
} else if(du >= 0 && du < 180) {
$(".huan1mask").css("transform", 'rotate(' + du + 'deg)');
$('.text').text(du);
}
}
} })($ || jQuery || Zepto)
参考：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap,.circle,.percent{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.wrap{
top:50px;
left:50px;
background-color: #ccc;
}
.circle{
box-sizing: border-box;
border:20px solid #ccc;
clip:rect(0,200px,200px,100px);
}
.clip-auto{
clip:rect(auto, auto, auto, auto);
}
.percent{
box-sizing: border-box;
top:-20px;
left:-20px;
}
.left{
transition:transform ease;
border:20px solid blue;
clip: rect(0,100px,200px,0);
}
.right{
border:20px solid blue;
clip: rect(0,200px,200px,100px);
}
.wth0{
width:0;
}
.num{
position: absolute;
box-sizing: border-box;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 40px;
left: 20px;
top: 20px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
</style>
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="circle">
<div class="percent left"></div>
<div class="percent right wth0"></div>
</div>
<div class="num"><span>0</span>%</div>
</div>
</body>
<script>
var percent=0;
var loading=setInterval(function(){
if(percent>100){
percent=0;
$('.circle').removeClass('clip-auto');
$('.right').addClass('wth0');
}else if(percent>50){
$('.circle').addClass('clip-auto');
$('.right').removeClass('wth0');
}
$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
$('.num>span').text(percent);
percent++;
},200);
</script>
</html>
<!doctype html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百分比</title>
<style type="text/css">
.yuan {
width: 200px;
height: 200px;
margin: 0 auto;
box-sizing: border-box;
padding-top: 20px;
text-align: center;
background-color: #f1f1f1;
border-radius: 50%;
position: relative;
} .yuan_bl1,
.yuan_bl2,
.yuan_bl3,
.yuan_bl4 {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
} .yuan_bl1,
.yuan_bl2 {
background-color: #FF7F4C;
-webkit-box-shadow: 0 0 1px 1px #fff inset;
box-shadow: 0 0 1px 1px #fff inset;
} .yuan_bl3,
.yuan_bl4 {
background-color: #f1f1f1;
} .yuan_bl1,
.yuan_bl3 {
clip: rect(0 200px 100px 0);
} .yuan_bl2,
.yuan_bl4 {
clip: rect(100px 200px 200px 0);
} .yuan_text {
width: 160px;
height: 160px;
line-height: 160px;
box-sizing: border-box;
padding-left: 10px;
margin: 0 auto;
color: #FF7F4C;
font-size: 36px;
font-family: "PingFangSC-Thin", "sans-serif", "STHeitiSC-Light", "微软雅黑", "Microsoft YaHei";
background-color: #fff;
border-radius: 50%;
position: relative;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
</head> <body>
<div class="yuan">
<div class="yuan_bl1"></div>
<div class="yuan_text">36°</div>
</div>
<script>
$(function() {
//初始化
var bl = parseInt($('.yuan_text').html());
var rotatenum = bl;
if(bl > 180) {
var blhtml = '';
rotatenum = bl - 180;
blhtml += '<div class="yuan_bl2">';
blhtml += '<div class="yuan_bl4" style="-webkit-transform:rotate(' + rotatenum + 'deg);transform:rotate(' + rotatenum + 'deg);"></div>';
blhtml += '</div>';
//$('.yuan_bl1').remove($('.yuan_bl3'));
$('.yuan_bl1').after(blhtml);
} else {
var blhtml = '';
blhtml += '<div class="yuan_bl3" style="-webkit-transform:rotate(' + rotatenum + 'deg);transform:rotate(' + rotatenum + 'deg);"></div>';
$('.yuan_bl1').append(blhtml);
}
})
</script>
</body> </html>
css圆环百分比的更多相关文章
- CSS圆环百分比DEMO
<html> <head> <title>test</title><!--本DEMO参考http://www.cnblogs.com/jr1993 ...
- css3圆环百分比，菜单栏定位导航
前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...
- 图片框住一个小视频 谈css padding百分比自适应
今天市场提出活动页,活动页有一块内容是在一个手机背景图框里播放视频,网页是适配的,设计师只给我一张带有手机壳的背景图. 如果用JS画应该也是可以的,但一个简单的活动页没必要,快速实现用背景图调CSS最 ...
- css画百分比圆环
html: <div class="circle"> <div class="percent-circle percent-circle-left&qu ...
- 用css动态实现圆环百分比分配——初探css3动画
最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额.要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态! 在mdn把新特性gradients(渐变).trans ...
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...
- vue实用组件——圆环百分比进度条
因为所在公司临近年底突然宣布Game Over,导致我等小码农又要踏上一个艰辛的求职道路了.才眨眼功夫,年就过完了,快乐的时光总是很匆忙呀. 开年的第一个面试,面试官问我会不会自己写一个圆环进图圈,这 ...
- css border-raidus 百分比和数值设置效果不同
1.水平方向和竖直方向半径相等:设置数值和百分比的效果是一样的: 2.水平方向和竖直方向半径不相同:则效果不一致,具体参见:http://www.zhangxinxu.com/wordpress/20 ...
- HTML5 移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- redis密码管理
redis 默认密码是空,在应用中,通常需要设置redis的连接密码,可通过命名方式进行密码管理: 1.连接redis: [redis@hadooptest Downloads]$ cd redis- ...
- zabbix快速安装
运维什么的其实感觉根本没有什么好写的了,因为太简单了嘛,尤其是这个监控,整得那么麻烦要干嘛,不过貌似很多人喜欢这个,我就随手写一点吧 环境:centos7.2.1511最简安装,就是什么都不选直接就开 ...
- php设计模式学习之观察者模式
什么都不说,先看代码: interface userOperateImpl { public function operate($username); } class userLoginLog imp ...
- java多线程学习－多个线程访问对象共享数据的方式
public class MulitThreadShareData { public static void main(String[] args) { final ShareData1 data1 ...
- UIWebView使用时的问题,包含修改user agent
1.①像普通controller那样实现跳转到webview的效果,而不是直接加到当前controller②隐藏webview的某些元素③webview跳往原生app④给webview添加进度条 解决 ...
- 转 SVN 在vs中的使用
给大家介绍一些SVN的入门知识!希望对大家的学习起到作用! 关于SVN与CVS的相关知识,大家可以自己去google一下. 一.准备 SVN是一个开源的版本控制系统 ...
- maven学习(4)-本地项目打包发布到私有仓库
发布本地项目到私服仓库 在前面章节有介绍maven发布本地jar包到私服仓库,这里详细介绍一下步骤. 在项目开发中通常会引用其他的jar,怎样把自己的项目做为一个jar包的形式发布到私服仓库中,主要有 ...
- TortoiseSVN汉化包装了，不管用，仍然是英文菜单
TortoiseSVN装了后,把对应的汉化包也装了,但不管用,仍然是英文菜单. 想着是因为没有重启的原因,但是重启了再装,仍然看不到中文工菜单. 想了一下,TortoiseSVN汉化包在装的时候,没有 ...
- windows防火墙打不开的处理办法
一.防火墙配置出错 开始-->运行-->gpedit.msc 这时,打开了组策略 在左面分级展开 计算机配置-->管理模板-->网络-->网络连接-->Window ...
- xcode 制作静态库.a文件 详解
http://blog.csdn.net/kepoon/article/details/21516977 最近在做Apple的IOS开发,有开发静态库的需求,本身IOS的开发,只允许静态库或者Fram ...