CSS3实现的闪烁跳跃进度条示例(附源码)


Posted in HTML / CSS onAugust 19, 2013

这个示例的原理是通过大量的css3属性来实现的,如:animation、transform、keyframes等等属性。值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出。相信这个伪类选择符在将来会是一个很强大的一个工具。推荐大家多多了解以及实践使用。这个伪类选择符E:nth-child(n)的含义是匹配父元素的第n个子元素E。 例如:ul li:nth-child(3)表示的是选择<ul>元素里面的第3个<li>。提示一下,该属性在IE8(包含IE8)版本以下是不支持的。

建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~它是一款HTML5跨平台一站式应用开发、调试和部署工具, 支持HTML5跨平台开发,原Java跨平台插件支持Android/Symbian/Kjava的跨平台和原生开发,为开发者提供丰富的应用模板、示例代码及开发者社区服务,已覆盖Android、iOS、WP、Symbian、Kjava操作系统平台。

UDE模拟器调试效果图:
CSS3实现的闪烁跳跃进度条示例(附源码) 
CSS3实现的闪烁跳跃进度条示例(附源码)
下面就一起来看看该示例的实现代码吧。完整代码下载请见附件。

HTML结构代码

复制代码
代码如下:

<div class="center">
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
</div>

CSS样式代码
复制代码
代码如下:

@keyframes bump {
0% {
opacity: 0;
left: 535px;
}
100% {
left: -10px;
opacity: 0;
}
10%, 85% {
opacity: 1;
}
}
@keyframes spin {
0%, 100% {
height: 20px;
top: 50px;
}
50% {
height: 100px;
top: 0;
}
}
body {
background: rgba(0, 0, 0, 0.2);
}
div.center {
text-align: center;
margin-top: 40px;
}
ul {
background-color: rgba(255, 255, 255, 0.4);
position: relative;
display: block;
padding: 0;
margin: auto;
width: 600px;
height: 10px;
list-style: none;
border-radius: 200px;
border: 5px solid rgba(255, 255, 255, 0.2);
margin-top: 100px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
}
ul li {
position: absolute;
margin-top: -55px;
}
ul li:nth-child(1) {
animation: bump 1.5s infinite;
animation-delay: 0.1s;
}
ul li:nth-child(1) div {
border-radius: 22px;
transform-origin: center;
position: absolute;
height: 60px;
width: 80px;
animation: spin 0.4s infinite;
animation-delay: 0.1s;
background-color: rgba(120, 120, 120, 0.3);
}
ul li:nth-child(2) {
animation: bump 1.5s infinite;
animation-delay: 0.2s;
}
ul li:nth-child(2) div {
border-radius: 22px;
transform-origin: center;
position: absolute;
height: 60px;
width: 80px;
animation: spin 0.4s infinite;
animation-delay: 0.2s;
background-color: rgba(120, 0, 0, 0.3);
}
ul li:nth-child(3) {
animation: bump 1.5s infinite;
animation-delay: 0.3s;
}
ul li:nth-child(3) div {
border-radius: 22px;
transform-origin: center;
position: absolute;
height: 60px;
width: 80px;
animation: spin 0.4s infinite;
animation-delay: 0.3s;
background-color: rgba(120, 120, 0, 0.3);
}
ul li:nth-child(4) {
animation: bump 1.5s infinite;
animation-delay: 0.4s;
}
ul li:nth-child(4) div {
border-radius: 22px;
transform-origin: center;
position: absolute;
height: 60px;
width: 80px;
animation: spin 0.4s infinite;
animation-delay: 0.4s;
background-color: rgba(0, 120, 0, 0.3);
}
ul li:nth-child(5) {
animation: bump 1.5s infinite;
animation-delay: 0.5s;
}
ul li:nth-child(5) div {
border-radius: 22px;
transform-origin: center;
position: absolute;
height: 60px;
width: 80px;
animation: spin 0.4s infinite;
animation-delay: 0.5s;
background-color: rgba(0, 120, 120, 0.3);
}
ul li:nth-child(6) {
animation: bump 1.5s infinite;
animation-delay: 0.6s;
}
ul li:nth-child(6) div {
border-radius: 22px;
transform-origin: center;
position: absolute;
height: 60px;
width: 80px;
animation: spin 0.4s infinite;
animation-delay: 0.6s;
background-color: rgba(0, 0, 120, 0.3);
}
ul li:nth-child(7) {
animation: bump 1.5s infinite;
animation-delay: 0.7s;
}
ul li:nth-child(7) div {
border-radius: 22px;
transform-origin: center;
position: absolute;
height: 60px;
width: 80px;
animation: spin 0.4s infinite;
animation-delay: 0.7s;
background-color: rgba(120, 0, 120, 0.3);
}

注:请自行在所需之处加上浏览器前缀(如:-webkit- 、 -moz-),否则将不能正常显示效果。 

源码下载请见附件
CSS3实现的闪烁跳跃进度条示例(附源码) 
闪烁跳跃进度条.rar (1.6 KB)

HTML / CSS 相关文章推荐
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 #HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 #HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 #HTML / CSS
CSS3正方体旋转示例代码
Aug 08 #HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 #HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 #HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 #HTML / CSS
You might like
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php中上传文件的的解决方案
2018/09/25 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
document.write的几点使用心得
2014/05/14 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue组件生命周期详解
2017/11/07 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
python文件特定行插入和替换实例详解
2017/07/12 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python ETL工具 pyetl
2020/06/07 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
一套Delphi的笔试题二
2013/05/11 面试题
计算机软件个人的自荐信范文
2013/12/01 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
生物制药专业求职信
2014/03/11 职场文书
会计学自荐信
2014/06/03 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
教师节学生演讲稿
2014/09/03 职场文书
2014年班干部工作总结
2014/11/25 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
北京颐和园导游词
2015/01/30 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
python 进阶学习之python装饰器小结
2021/09/04 Python