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 ...
随机推荐
- 星号代替数字 js语句
在做登陆界面时,有这样一个需求,就是输入密码时,以密文形式展示(*),由于html5的属性 type="password" 只能以圆点形式展示, 下面方法能以星号代替输入符合 d ...
- oracle 方向及资料
总结了一下大家的意见,也加了一些个人的看法,Oracle的学习路径,可供参考: 初级阶段: 可以从OCP教材开始,还有文档中的Administrator's Guide.Concepts.Perfor ...
- 把 TBytes 转换为十六进制字符串
function BytestoHexString(ABytes: TBytes; len: Integer): AnsiString; begin SetLength(Result, len*) ...
- java.io.Serializable 序列化问题
java.io.Serializable 序列化问题 Person.java package a.b.c; public class Person implements java.io.Seriali ...
- CSS线性渐变
/*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...
- python之优雅处理套接字错误
#!/usr/local/bin/python3.5 #coding:utf-8 import sys import socket import argparse def main(): #setup ...
- Java 基础知识总结 (三、运算符)
三.Operators 运算符 Assignment Operators(赋值运算符) = += -= %= *= /= <<= >>= ...
- Android测试——adb命令
Adb (Android Debug Bridge)起到调试桥的作用. 通过adb我们可以在Eclipse中方便通过DDMS来调试Android程序.adb采用监听Socket TCP 5554等端口 ...
- 揭开HTTP网络协议神秘面纱系列(一）
1.了解Web及网络基础 TCP/IP协议族按层次可以分为下面四层: 应用层:决定了向用户提供应用服务时通信的活动,TCP/IP协议族内预存了各类通用的应用服务,比如:FTP(文件传输协议)和DNS( ...
- 小希的数表2(用的for循环)
#include<iostream> 02.#include<algorithm> 03.using namespace std; 04. 05.bool cmp(int a, ...