<!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做的一个激光条的更多相关文章

  1. 做为一个前端工程师，是往node方面转，还是往HTML5方面转

    文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...

  2. 前端观察：HTML5做得好，收入不比 iOS 差

    谷歌奋进的绿色机器人超过了苹果的市场占有率,这一市场现象,导致了愈来愈多的开发者转投html5的怀抱.而HTML5将成为开发者拥抱同时拥抱Android和IOS的不二法门. 根据著名移动生态系统分析公 ...

  3. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  4. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  5. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  6. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

  7. 这几天有django和python做了一个多用户博客系统（可选择模板）

    这几天有django和python做了一个多用户博客系统(可选择模板) 没完成,先分享下 断断续续2周时间吧,用django做了一个多用户博客系统,现在还没有做完,做分享下,以后等完善了再慢慢说 做的 ...

  8. 做了一个动态代理IP池项目，邀请大家免费测试~

    现在出来创业了,目前公司在深圳. 做了啥呢, 做了一个动态代理 IP 池项目 现在邀请大家免费测试体验! 免费激活码:关注微信公众号:2808proxy (每人每天限领一次噢~) 网站:https:/ ...

  9. HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

随机推荐

  1. 12Cookie、Session

    12Cookie.Session-2018/07/24 1.保存会话数据 cookie客户端技术,把每个用户的数据以cookie的形式写给用户各自的浏览器 HttpSession服务端技术,服务器运行 ...

  2. 洛谷——P2171 Hz吐泡泡

    P2171 Hz吐泡泡 题目描述 这天,Hz大大心血来潮,吐了n个不同的泡泡玩(保证没有重复的泡泡).因为他还要写作业,所以他请你帮他把这些泡泡排序成树(左子树<=根<右子树).输出它的后 ...

  3. 「 HDU P3555 」 Bomb

    # 题目大意 给出 $\text{T}$ 个数,求 $[1,n]$ 中含 ‘49’ 的数的个数. # 解题思路 求出不含 '49' 的数的个数,用总数减去就是答案. 数位 $DP$,用记忆化来做. 设 ...

  4. 每日命令：（9）touch

    linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件. 1．命令格式: touch [选项]... 文件... 2．命令参数: -a    ...

  5. Linux查看Port状态命令、密钥SSH、会话同步

    查看Port状态 ss -ntl命令,参数: 参数 作用 -a 显示所有的套接字 -l 显示所有连接状态的套接字 -e 显示详细的套接字信息 -m 显示套接字的内存使用情况 -p 显示套接字的进程信息 ...

  6. 1007 Maximum Subsequence Sum (PAT(Advance))

    1007 Maximum Subsequence Sum (25 分)   Given a sequence of K integers { N​1​​, N​2​​, ..., N​K​​ }. A ...

  7. 什么是restful

  8. java Beanutils.copyProperties( )用法

    这是一篇开发自辩甩锅稿~~~~ 昨天测试小姐姐将我的一个bug单重开了,emmmm....内心OS:就调整下对象某个属性类型这么简单的操作,我怎么可能会出错呢,一定不是我的锅!!but再怎么抗拒,bu ...

  9. 【Codeforces 369C】 Valera and Elections

    [链接] 我是链接,点我呀:) [题意] 给你一棵树 让你选择若干个修理点. 这些修理点被选中之后,节点i到1号节点之间的所有"坏路"都会被修好 问最少需要选择多少个点才能将所有的 ...

  10. poj 3237 树链剖分模板（用到线段树lazy操作）

    /* 本体在spoj375的基础上加了一些操作,用到线段树的lazy操作模板类型 */ #include<stdio.h> #include<string.h> #includ ...