CSS3动画:YouTube的红色激光进度条
本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个。
之前一篇文章《CSS3 动画一瞥》简单介绍了CSS3动画相关的内容,这里继续讲一个例子。
前些时候有注意到YouTube网站放出的新特性,那就是在视频页面间切换时,页面顶部会有一道华丽丽的红色激光脉冲掠过。
那不是其他什么为了炫技的东西,它是一个进度条,平时我们见了千百遍经常以转圈形式出现的进度条。当然谷歌对于进度展示的创新不止于此啦,比如用于谷歌加的下载gif也是很有新意的一个玩意儿。
但YouTube这个进度条似乎更具创新,让人觉得相当惊艳。
所以好奇的我按捺不住想要拔开它神秘面纱的心情。
大体来看用了以下技术:
- Ajax:首先页面内容的加载使用的是Ajax异步请求,所以页头那个激光元素可以在内容请求与接收过程中得以展示,不然的话整个页面刷新那就无法实现了;
- HTML5 History API: 其次我注意到页面地址也是跟着变的。前面提到整个页面是没有刷新的(一个不太靠谱的方法可以验证这点是显示网站favicon的地方没有出现类似这样的等待图标),但页面地址却更新了,方便你把连接放送给别人时能够打开该页面。这里用到的就是HTML5的History API,通过它可以操作浏览器地址栏的地址,书签及页面状态信息等。
- CSS3动画属性 :另外就是红色激光线条本身的实现上,使用了CSS3的动画或者JS写的动画,但更大的可能是两种结合。
经过一些谷歌,发现也有其他同类在讨论这个话题,并贴出了相关实现。拿来研究了下决定自己把玩一把分享给大家。
这里只是实现那个一道红光掠过的效果,不包含对Http请求各个状态的进度处理以得到页面实际的加载进度,我们将把这个动画效果写成在一个固定的时间内完成,比如3秒。
准备工作
开始之前需要多少了解一点CSS3关于动画相关的知识,可以通过我之前那篇博文,也可以到W3School进行了解。
其次,需要了解诸如 CSS3的transition等不常用的属性。
最后还需要了解jQuery的animate API的使用。
分解实现
整个动画可以分为两个部分,一个是整体向前延伸的光线,另一个就是跑在最前面不停闪烁的头部。
向前滑动的激光
首先来看如何实现一条向前延伸的光线效果的。
其实要实现这么一个效果使用CSS3的动画属性来做是非常简单的,但为什么要使用jQuery来做呢,看完下面后答案就揭晓了。
先看纯CSS3的版本。
1.新建一个html文件然后加入一个div,用来呈现这个向前的动画。
2.然后开始给id为progress的div写动画。
考虑到简略,一些CSS属性为了能够在不同浏览器里正常工作需要写很多个版本,比如CSS3的animatiion正常情况下需要为每个不同内容的浏览器写个版本的:
但我是在Chromium里做实验,遇到这种情况就只考虑-webkit-前缀的了,在完整源码里再把兼容其他浏览器的代码补全。
设置目标元素背景色为深红色(#b91f1f),高度为2px。因为这两个属性是在动画过程中不变的,所以单独写出来。同时定义动画关键帧:开始宽度为0,结束时宽度为100%。
然后对元素应用动画,设定动画时间为3秒:
现在可以保存页面看效果了。
var iframe = document.getElementById('demo1');
iframe.src = iframe.src;
查看效果 //DEMO1
我们会看到一条红色线条向右飞去。但它没有贴在页面的边缘,所以还需要将body的margin去掉。所以现在的代码应该是这样的。
效果是这样的:
但问题出现了。当动画放完后线条会一直存在,不会消失。但实际上进度完成了进度条就应该从页面消失了。所以我们改为使用jQuery来实现,这样可以在动画完成后通过JavaScript将其隐藏。
更改为上面的代码后,进度条播放完后会消失。
var iframe = document.getElementById('demo2');
iframe.src = iframe.src;
查看效果 //DEMO2
现在线条消失时太突兀了,我们需要让它渐渐消失掉,需要用到CSS的transation属性。
var iframe = document.getElementById('demo3');
iframe.src = iframe.src;
查看效果 //DEMO3
光晕与闪烁效果
我们可以看到在那束激光划过时,其头部是块闪烁且周围带光晕效果的长条,所以剩下的部分就是完成这个东西了。
首先我们看闪烁如何做。
新建一个html文档,页面也是很简单就一个div用于展示动画。并且设置其样式为带阴影效果和圆角效果,圆角是为了看起来柔和一点。
//DEMO4
效果:
然后再为其编写动画效果,这个动画效果是让它闪烁,可能通过改变其透明度来控制,然后将动画设置成无限播放模式,就出来想要的闪烁了。
//DEMO5
现在我们把这个效果加到原来那个线条上。在原来那个id为progress的div下加一个span元素用于呈现这个闪烁效果。
它必需一起处于线条的最右边,所以考虑将其位置属性设置为absolute并且将progress 那个div设为fixed。
所以最后的效果及代码大概是这样:
var iframe = document.getElementById('demo6');
iframe.src = iframe.src;
查看效果 //DEMO6
例子代码:下载
Reference:
http://www.youtube.com/watch?v=dN3xwItBKDA
https://www.facebook.com/photo.php?fbid=217862301702396
http://jsfiddle.net/ajaSB/3/light/
Animate.css https://daneden.me/animate/
CSS3动画:YouTube的红色激光进度条的更多相关文章
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- CSS3 中的按钮效果与进度条
效果如图
- Javascript 及 CSS3 实现进度条效果
Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 第二百四十一节,Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
- CSS实现进度条
进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等. 以前如果想要创建一个进度条的动画效果,没有使用 ...
- WPF自定义控件第一 - 进度条控件
本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...
- matlab GUI之常用对话框(二)-- 进度条的使用方法
常用对话框(二) 进度条 waitbar 调用格式: h = waitbar(x,'message') waitbar(x,'message','CreateCancelBtn','button ...
- COCOS2D-X之圆形进度条的一个简单Demo
这应该是游戏中很常见的一个效果.显示某个事件的进度等,在加载资源或者联网的时候经常用到.所以有必要学习学习 一.我们直接在COCOS2D-X自带的HelloCpp的工程中添加代码即可.我们在初始化中添 ...
随机推荐
- cxf+spring+数字签名开发webservice(一)
数字证书的准备 下面做的服务端和客户端证书在例子中无法加解密,不知道什么原因,我是使用正式环境中的客户端和服务端进行开发测试的,所以需要大家自己去准备证书,或者有人知道为什么jdk生成 ...
- 不支持C++11 decltype的噩耗
前言:因为公司现在使用vs2008,所以很多c++11的新特性还未能使用,导致写了很多冤枉代码. 最初引擎的数学库非常简单,使用起来也不方便,例如: float FastLerp(const floa ...
- Excel导入-----导出(包含所选和全部)操作
在做系统的时候,很多时候信息量太大,这时候就需要进行Excel表格信息的导入和导出,今天就来给大家说一下我使用Excel表格信息导入和导出的心得. 1:首先需要在前端显示界面View视图中添加导入Ex ...
- jekyll安装的斗智斗勇
jekyll---将纯文本转化为静态网站和博客,GitHub Pages 可以运行 Jekyll,你很简单就可以完全免费的在 GitHub 上发布网站. 小白安装jekyll时的若干问题,有错误欢迎指 ...
- MVC 3 IIS7.5 网站发布及IIS配置文件问题处理
1.环境配置 1) IIS7.5 2)VS2010 完整版 2.配置internet信息服务功能,直接上图,简洁明了. 3.打开VS2010 ,网站发布, 4.IIS网站设置 添加网站, 5-在浏览器 ...
- javascript实现字符串的截取
截取字符串方法有很多的,(不含根据传入参数截取成数组的split()方法)这里说的是子字符串,所以不说split()方法了. slice(),substr(),substring()一共三种方法,其中 ...
- python语言特性及其数据类型
- access查询优化
一个zirancun 14万数据量,一个 zirancuntd 19万数据,这两个 zirancuntd.distid 与zirancun.id进行关联,查询 zirancuntd.distid不存 ...
- gulp 配置自动化前端开发
有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:“grunt廉颇老矣 ...
- oracle exists
公司项目中有用到exists,感觉挺有用的,拷贝一些感念的东西. “exists”和“in”的效率问题 1) select * from T1 where exists(select 1 from T ...