CSS3 圆形时钟式网页进度条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3时钟式进度条</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#cricle{width:200px;height:200px;position:relative;background:#333;overflow:hidden}
#cricle .left,#cricle .right,#cricle .text{width:200px;height:200px}
#cricle .text{position:absolute;top:0;left:0;z-index:41;color:#fff;font:26px/200px 'arial';text-align:center}
#cricle .mask{z-index:40}
#cricle .mask,#cricle .bg{width:100px;height:200px;background:#333;position:absolute;top:0}
#cricle .bg{background:url(/jscss/demoimg/201207/bg_green.png) no-repeat 0 0}
#cricle .mask,#cricle .left .bg{left:0}
#cricle .right{display:none}
#cricle .right .bg{background-position:right top;right:0}
</style>
<script src="/ajaxjs/jquery1.3.2.js"></script>
</head>
<body>
<div id="cricle">
<div class="mask"></div>
<div class="left">
<div class="bg"></div>
</div>
<div class="right">
<div class="bg"></div>
</div>
<div class="text"></div>
</div>
<script type="text/javascript">
var C = function(id){
this.box = $("#"+id);
this.left = this.box.find(".left");
this.right = this.box.find(".right");
this.mask = this.box.find(".mask");
this.text = this.box.find(".text");
this.d = 0;
this.A = null;
this.init();
}
C.prototype = {
init : function(){
var T = this;
this.A = window.setInterval(function(){T.change()},80);
},
change : function(){
var T = this;
if(this.d>180){
if(this.d>360){
window.clearInterval(this.A);
this.A = null;
return;
}
this.right.show();
this.mask.hide();
}
this.text.text(parseInt(this.d/3.6));
this.left.css({
"-webkit-transform":"rotate("+this.d+"deg)",
"-moz-transform":"rotate("+this.d+"deg)"
})
this.d += 6;
}
}
new C("cricle");
</script>
</body>
</html>

原文链接：http://www.codefans.net/jscss/code/3573.shtml

转载于:https://www.cnblogs.com/weibo806/p/5237696.html

CSS3 圆形时钟式网页进度条相关推荐

html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
ProgressBar.js – 漂亮的响应式 SVG 进度条
ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...
HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
原链接:https://www.cnblogs.com/libaoli/p/5779629.html 作者:请叫我阿力这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方, ...
用emWin的2D绘图函数画一个带圆形端点的环形进度条
先上效果图,首先是顺时针转: 然后是逆时针转: 大概讲一下思路吧,首先讲一下顺时针是怎么弄的,很简单. 画圆弧函数GUI_DrawArc有起始角度a0和终止角度a1两个参数,且a0必须小于a1否则无法 ...
基于html5动画效果毕业论文,毕业设计（论文）-基于HTML5和CSS3的响应式网页制作.doc...
第PAGE \* MERGEFORMAT1页(共16页) 全日制本科生毕业论文题目: 基于HTML5和CSS3的响应式网页制作学院: 计算机与信息科学学院专业年级: 计算机科学与技术2011 ...
android源生进度条,如何使用源生css3实现圆环加载进度条
这次给大家带来如何使用源生css3实现圆环加载进度条,使用源生css3实现圆环加载进度条的注意事项有哪些,下面就是实战案例,一起来看一下. 效果图: 当时的要求是让进度条以扇形渐变的效果加载.我想了半 ...
iOS实现微信网页进度条,WKWebview进度条的实现
实现微信网页进度条或者说就是webview的加载进度条的效果,主要代码如下: 一.第一步,添加观察者 [_webViewaddObserver:selfforKeyPath:@"estima ...
HTML5+CSS3的响应式网页设计：自动适应屏幕宽度转自：欲思博客
一."自适应网页设计"的概念 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动 ...
CSS3制作一个简单的进度条
这里只是一个小demo,一个用CSS3写的进度条. 如图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo ...
html原生js进度条圆形,原生 JavaScript 实现进度条
原生JavaScript特效 JavaScript实现进度进度条实现介绍使用JavaScript实现进度条功能. 原理:通过鼠标移动事件,获取鼠标移动的距离. 步骤: (1)html 中 div ...

CSS3 圆形时钟式网页进度条

CSS3 圆形时钟式网页进度条相关推荐

最新文章

热门文章