html5做的一个激光条
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<title>CSS3激光加载条</title>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
/*简单清除浏览器样式*/
*{
margin:0px;
padding:0px;
}
/*设置进度条高度、背景色*/
#process{
height: 2px;
background: #1abc9c;
transform:opacity 300ms linear;
-webkit-animation:myProcess 3s;/*动画绑定*/
animation:myProcess 3s;
}
/*采用CSS3创动画规则*/
@-webkit-keyframes myProcess{
0%{width: 0px;}
100%{width:100%;}
}
@keyframes myProcess{
0%{width: 0px;}
100%{width:100%;}
}
.over{
opacity: 0;
}
/**
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性
资料来源：http://www.w3cschool.cc/
**/
</style>
<script type='text/javascript'>
$({ timer: 0 }).animate({timer: 100}, //从0-100
{
duration: 3000,//速度设定，
//三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
step: function() {//阶梯函数
var percentage = Math.round(this.timer); //对timer每一刻的值进行取整操做
$('#process').css('width', percentage + "%");
if (percentage == 100) {
$("#process").addClass("over"); //当加载完毕时，隐藏Process
}
}
});
</script>
</head>
<body>
<div id="process"> </div>
</body>
</html>
html5做的一个激光条的更多相关文章
- 做为一个前端工程师，是往node方面转，还是往HTML5方面转
文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...
- 前端观察：HTML5做得好，收入不比 iOS 差
谷歌奋进的绿色机器人超过了苹果的市场占有率,这一市场现象,导致了愈来愈多的开发者转投html5的怀抱.而HTML5将成为开发者拥抱同时拥抱Android和IOS的不二法门. 根据著名移动生态系统分析公 ...
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- 【JavaScript】HTML5/CSS3实现五彩进度条应用
今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...
- html5 canvas 实现一个简单的叮当猫头部
原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...
- 这几天有django和python做了一个多用户博客系统（可选择模板）
这几天有django和python做了一个多用户博客系统(可选择模板) 没完成,先分享下 断断续续2周时间吧,用django做了一个多用户博客系统,现在还没有做完,做分享下,以后等完善了再慢慢说 做的 ...
- 做了一个动态代理IP池项目，邀请大家免费测试~
现在出来创业了,目前公司在深圳. 做了啥呢, 做了一个动态代理 IP 池项目 现在邀请大家免费测试体验! 免费激活码:关注微信公众号:2808proxy (每人每天限领一次噢~) 网站:https:/ ...
- HTML5/CSS3实现五彩进度条应用
今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...
随机推荐
- 微信小程序理解8大误区，你中招了吗？
2016年年底程序员话题中最火的是什么?莫过于微信小程序!小程序被炒得沸沸扬扬,再次证明一点,微信想让什么火,真的就能让什么火!这种能力真是全中国再也没有人有了,政府也没有.但是,小程序刚刚开始,你对 ...
- 嵌入式LinuxC语言程序设计基础教程
第1章 嵌入式LinxuC语言开发工具 第2章 数据 第3章 数据的输入输出 第4章 运算符和表达式 第5章 程序结构和控制语句 第6章 数组 第7章 指针 第8章 函数 第9章 用户自定义数据类型 ...
- 闸门机制（Gate Mechanism）
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51728107 神经网络中常说的闸门机制 ...
- 单例模式（C#实现）
这是这段时间学习设计模式的时候的源代码. 单例(单件)模式的五种实现. 通过一个计数器的例子调用验证一下. 把下面的代码直接拷进vs下,运行就可以了.(控制台应用程序) 以后把剩余的设计模式有空儿就粘 ...
- [luoguP1586] 四方定理（DP 背包）
传送门 相当于背包, f[i][j] 表示当前数为 i,能分解成 j 个数的平方的和的数量 那么就是统计背包装物品的数量 ——代码 #include <cmath> #include &l ...
- Container/Injection 为什么会出现容器的思路，以后会有什么的趋势，未来是怎样的
一.为什么会出现容器的思路? 容器概念始于 1979 年提出的 UNIX chroot,它是一个 UNIX 操作系统的系统调用,将一个进程及其子进程的根目录改变到文件系统中的一个新位置,让这些进程只能 ...
- 洛谷 P3063 [USACO12DEC]牛奶的路由Milk Routing
P3063 [USACO12DEC]牛奶的路由Milk Routing 题目背景 征求翻译.如果你能提供翻译或者题意简述,请直接发讨论,感谢你的贡献. 题目描述 Farmer John's farm ...
- MyBatis与Spring MVC结合时，使用DAO注入出现：Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required
错误源自使用了这个例子:http://www.yihaomen.com/article/java/336.htm,如果运行时会出现如下错误: Invocation of init method fai ...
- python基础学习之02 元组
#encoding=utf-8 # 元组与列表一样,也是一种序列 print (1,2,3) print 1,2,3 print(1,) print 1, a=1 print(type(a)) a=1 ...
- [miniApp] WeChat user login code
in client/app.js, we put user login logic inside here, so that other module can reuse those code by ...