CSS3动画:YouTube的红色激光进度条

本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个这个,还有这个

 

之前一篇文章《CSS3 动画一瞥》简单介绍了CSS3动画相关的内容,这里继续讲一个例子。

前些时候有注意到YouTube网站放出的新特性,那就是在视频页面间切换时,页面顶部会有一道华丽丽的红色激光脉冲掠过。

那不是其他什么为了炫技的东西,它是一个进度条,平时我们见了千百遍经常以转圈形式出现的进度条。当然谷歌对于进度展示的创新不止于此啦,比如用于谷歌加的下载gif也是很有新意的一个玩意儿。

但YouTube这个进度条似乎更具创新,让人觉得相当惊艳。

所以好奇的我按捺不住想要拔开它神秘面纱的心情。

大体来看用了以下技术:

  1. Ajax:首先页面内容的加载使用的是Ajax异步请求,所以页头那个激光元素可以在内容请求与接收过程中得以展示,不然的话整个页面刷新那就无法实现了;
  2. HTML5 History API: 其次我注意到页面地址也是跟着变的。前面提到整个页面是没有刷新的(一个不太靠谱的方法可以验证这点是显示网站favicon的地方没有出现类似这样的等待图标),但页面地址却更新了,方便你把连接放送给别人时能够打开该页面。这里用到的就是HTML5的History API,通过它可以操作浏览器地址栏的地址,书签及页面状态信息等。
  3. 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/

时间: 2024-09-25 20:51:14

CSS3动画:YouTube的红色激光进度条的相关文章

Javascript+CSS3实现进度条效果_javascript技巧

进度条在很多web中都能用的到,本文就是介绍了进度条效果,具体代码如下: 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下: 浏览器支持程度:所有主流浏览器都支持 clip 属性. Clip属性在w3c官网是这样描述的:通过对元素进行裁剪来控制元素的可视区域,默认情况下 元素是不进行任何裁剪的. Clip裁剪的语法如下:  .xx {clip:rect(<top>, <right>

Android自定义View实现带数字的进度条实例代码_Android

第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示   如上图所示:自定义的带数字的进度条的library项目的结构图   如上图所

JS实现网页加载进度条实例

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程.因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行大

网页设计技巧:网页的loading进度条设计

文章描述:虽然加载在整个页面来看是一件小事,但是因为加载在不经意间导致的用户流失却是大事.在加载页中显示进度,给出承诺,增加信息量或者幽默内容都能使用户潜移默化减少"觉察"正在加载的时间.但是真正可以减缓的办法还是加载的速度增快;别致的设计虽可以治标,但加载速 对于加载(loading),想必大家都不陌生.每当看到加载页中那个不停转啊转的圈圈,或者是 "Loading-"后面不停闪动的三个点点,心里都会涌起各种焦躁反感.根据一份调查得出,用户能够忍受加载的最长时间在

网页进度条设计:关于讨论loading加载后的一些心得

文章描述:Loading,让烦躁少一些. 前一阵子,接到一个app切图制作加载圆形进度条的任务,看到那个小进度条转啊转的,我若有所思-同时,一个做印象派制作间控件设计的同学最近做了改版,那个控件登陆需要一些时间,看到他对loading加载条进行了优化,然后就一起交流了一下.作为一个刚毕业入行不久的新人,请允许我分享一下关于讨论loading加载后的一些心得- 这是一个浮躁的年代,长听到这样的抱怨"好慢!""等到死!",每次看到那个转啊转的圈圈,或者是那个"

PPT制作进度条效果的方法

PPT制作进度条效果的方法   问题分析 用PPT制作进度条,相信难点在于数字的跳动和进度条的同步.教程中假设数字从10到100(间隔为10的倍数),每个数字跳动时间为0.1秒,10个数字时间共1秒,与此同时,把进度条的总出现时间设置为1秒,这样,就能做到数字的总时间和进度条的总时间相同,达到同步的目的--这就是制作PPT进度条的原理. 预备工作 在PPT制作进度条制作前,我们需要先把需要的素材(10个数字和进度条)先准备好. 动画设置 整个动画过程,我们需要把所有动画的[开始],设置为[与上一

我的Android进阶之旅------&amp;gt;Android自定义View实现带数字的进度条(NumberProgressBar)

今天在Github上面看到一个来自于 daimajia所写的关于Android自定义View实现带数字的进度条(NumberProgressBar)的精彩案例,在这里分享给大家一起来学习学习!同时感谢daimajia的开源奉献! 第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 版权声明:本文为[欧阳鹏]原创文章,欢迎转载,转载请注明出处! [http://blog.csdn.net/ouyang_peng/article/deta

Android自定义View实现带数字的进度条实例代码

第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

如何实现svg路径动画进度条

问题描述 如何实现svg路径动画进度条 用js怎么操作图片在svg的path上的位置,实现和页面加载进度绑定的进度条效果. 解决方案 http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506262114.html 解决方案二: 用CSS3实现动画进度条用CSS3实现动画进度条vc++中实现进度条