-webkit-animation- 实践

-webkit-animation- 实践  

2013-01-05 14:55:47|  分类: 技术分享 |  标签:css3  webkit  animation  |字号 订阅 css

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge

今天研究了一下好久以前就像学的css3创意幻灯片效果,也就是Github上比较出名的impress.js,具体demo请戳地址:demo,Github地址请戳:https://github.com/bartaz/impress.js,其实impress不是本篇博文的重点,我会另找时间介绍impress.js这个方便的演示库用法,重点是我在做者bartaz的github里面瞎逛,发现一个他以前作的关于CSS 3D 的简单知识普及幻灯片,就是用impress.js作的,地址以下:CSS 3D,你们是否是刚进去就被那个很3D feel不停左右摆的标题吸引住了!! html

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge
 

我以前也有写过一篇关于CSS3 transition的文章,来向你们介绍CSS3的魅力和一些transition的用法,固然,我只是很粗浅地介绍了CSS3动画的冰山一角,实际上CSS3所实现的效果已经超乎咱们的想象了,不过客观上来说,我我的不大建议涉水太深,毕竟这个领域还在探索阶段,先把现有知识扎扎实实先学好,闲暇时再捣鼓捣鼓这些效果,才是正道,嘿嘿。 css3

由于我已经彻底被这种效果吸引了,决定研究一下这个是怎么实现的,就将其代码拷贝下来,而后一行行解读,基本明白了原理,你们注意,我如下讲的例子,如标题所说,是webkit内核的浏览器,如chrome,safri等浏览器才能够浏览的哦! git

首先是html代码: github

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge

而后是简单的字体设置,这个你们随意吧,我懒就直接复制原网站的效果 web

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge
 

嗯嗯,完成以上代码后,就是这样子的: chrome

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge

但是这个只是第一步,咱们发现最终效果,在转的时候,会有3D的效果,3D的效果是怎么出来的呢,没错,就是比2D作了一个坐标,3D效果出来除了利用自身在不断循环摇摆以外,还有就是利用自己字体的位置深浅,简单来讲,就是利用字体离屏幕的远近不一样,再加上摇摆,便有了3D的效果,那么如今咱们先为字体加上深浅的效果,CSS3的transition有一个transform效果,我以前写的那篇文章里面也有用到这个效果,具体使用参考能够移步transform使用参考指南 ,咱们利用到的就是translate属性,但是设置x,y,z三个坐标系,都是参照自身为止来移动的,你们猜对了,就是利用改变z属性来改变字距离屏幕距离的,z值设置越大,就离咱们越近,负值反之。 浏览器

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge

设置完以后就是这个效果,可能有人会奇怪,为啥没啥变化,不是说有将字的远近调整了吗,怎么感受他们没变过,如图 app

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge
 

这是由于咱们没有对h1设置一个很关键的属性:-webkit-transform-style:preserve-3d个属性有两个值,preserve-3d|flat。前者能够使其子元素可以在他的3d空间的基础上应用3d变换,简单来讲,就是这个画布变成3维的了,加上以后,就是这样(PS:用了style属性以后字体会有锯齿感,多是渲染机制的问题吧,这个问题我不知道你们会不会出现,你们能够试试 测试

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge
 

不是同样么!!这不是坑爹么?!!!其实否则,主要是由于如今虽然有深浅效果了,只是由于总体没有作过透视处理,透视的原理,你们能够去搜索一下,其实也很简单,就是想象成镜头距离物件的距离,默认是无限远,就是看起来彻底没有透视感。火影忍者里的不少打斗就大量运用了夸张的透视效果。

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge
 

为了你们更好地理解,上两个测试对比图,能够看看透视的魅力,哦忘了介绍,透视能够写,-webkit-perspective:数值,也能够直接写在-webkit-transform里面。

perspective为781px时(总体有作过旋转,方便你们同时看一下translate属性

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge

perspective为309px时效果,那么你们也能够知道,
值越小,透视感越强,也就是深浅的感受越强,用数学的解释,就是坐标轴的比例问题

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge

接下来,就是给h1加上-webkit-transition:all 2s ease-in-out;来让其渐变变换,这个以前写的transition文章已经介绍过,这里就不专门解释了,最后就来到关键的一部了,我刚开始一直不理解,demo上面不停循环的摆来摆去的效果是怎么实现的,而后查了一些资料才知道,是利用CSS的关键帧和-webkit-animation的alternate属性值来实现动画的,这里从新说一下animation的用法

这里引用不懂大师的文章介绍:-webkit-animation的使用 

-webkit-animation是一个复合属性, 

-webkit-animation: name duration timing-function delay iteration_count direction; 

包括如下几个属性 

 (1) -webkit-animation-name 这个属性的使用必须结合@-webkit-keyframes一块儿使用 

 eg: @-webkit-keyframes fontchange{ 

 0%{font-size:10px;} 

 30%{font-size:15px;} 

 100%{font-siez:12px;} 

 } 百分比的意思就是duration的百分比,若是没有设置duration的话,则表示为无穷大 div{ -webkit-animation-name:fontchange;} 

(2)-webkit-animation-duration 表示动画持续的时间 

(3)-webkit-animation-timing-function 表示动画使用的时间曲线 【语法】:

 -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out 

(4)-webkit-animation-delay 表示开始动画以前的延时 【语法】 -webkit-animation-delay: delay_time; 

(5)-webkit-animation-iteration-count 表示动画要重复几回,infinite为无限次(实现关键) 

 【语法】-webkit-animation-iteration-count: times_number;

(6) -webkit-animation-direction 

表示动画的方向 【语法】-webkit-animation-direction: normal(默认) | alternate normal 方向始终向前 alternate 当重复次数为偶数时方向向前,奇数时方向相反

综合上面的解释,最终CSS代码以下:

-webkit-animation- 实践 - Mr.F - China ◎ D ◎ Fangge

So Enjoy It!!

相关文章
相关标签/搜索