秒速赛车技巧-秒速赛车规律_官网-秒速赛车走势图
当前位置:主页 > 秒速赛车规律 > 正文

秒速赛车改单HTML5入门教程之CSS3动画特效详解

  大家都知道网页的3大组成部分,分别是结构,表现和行为。就像我们要盖一座房子,地基要打的扎实,房子的架构要稳固,秒速赛车改单而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风格,是欧美风,还是田园风,这样我们的房子看起来才是舒服的,而我们大家平常看到的网页装修风格或者是说网页的呈现样式主要是由CSS层叠样式表来设置的,书写CSS层叠样式表可以随意改变网页的布局结构和内容样式,从而达到我们想要的风格排版;最后我们还需要给网页添加各种各样的动态效果,对浏览器事件作出响应,检测访客的浏览信息等,这些都是需要通过Javascript脚本语言来实现的。

  而我们今天要说的既不是网页的地基Html也不是网页的行为Javascript,而是修饰网页美观程度的Css3动画,之前我们编写的CSS层叠样式表可以随意实现我们想要呈现的样式效果,让我们的网页最终的呈现状态完美的符合设计稿。随着Css3的出现,给我们网页的效果增加很多动画元素,它们可以让我们的网页变得更加好玩有趣,并且更容易交互。之前网页当中的很多动画图片、flash动画和js动画都被Css3动画给取代了。

  网站动画已经是现在开发过程中不可缺少的一部分,所以Css3动画这个技术点也是作为一个前端开发人员必须要具备的一种能力,我们的千锋就业班HTML5课程体系也是把CSS3动画特效的课程放在了第一部分:前端页面重构当中,那么接下来我们来看一下Css3动画特效详解,在这之前,我们先来了解一下什么是动画?提到动画这个词,你会想到什么?

  通过刚才的列举,我们来思考一个问题,这些都是动画吗?换句话说动画是不是视频?在这里我要明确的告诉大家,动画不是视频。

  之所以这么说,是因为这两个词从根本的定义上来看是不一样的,首先我们来看动画,动画是采用逐帧拍摄对象并连续播放而形成运动的影像技术,它的拍摄方法是采用逐格方式。比如下面大家看到的这个gif动图,她就是由我们的ps当中的时间轴一帧一帧来做,添加上一定的延迟时间弄成的。

  其实动画的版本是有很多的,涉及的范围也比较广,基本上动画的版本是有4种的:

  4)WEB动画:在互联网平台播放和传播形式的前提下制作的动画,播放的方式一般为在线看或者是可以下载的动画。

  接下来我们来看下什么是视频,视频:视频的每帧图像都是通过实时摄取自然景象或者活动对象获得的。视频信号可以通过摄像机、录像机等连续图像信号输入设备来产生,比如一些类似于奔跑吧兄弟之类的综艺节目和欢乐颂之类的电视剧等等。

  通过刚才的讲解,相信大家对于动画已经有了简单的了解,那么接下来我们来看一下在我们网页当中常见的3种动画表现形式:

  优点:浏览器可以对动画进行优化,强制使用硬件加速(通过GPU来提高动画性能)。

  缺点:CSS动画只能暂停,不可以固定动画中某个特定的时间点,不能中间反转动画,不能控制时间的灵活度,不能在某个特殊的位置添加回调函数或是绑定回放事件,没有进度报告。

  缺点:Flash动画必须要插件来支持,如果没安装插件,浏览器是解析不了的。

  优点:JavaScript动画改变能力很强大,它可以在动画播放的过程当中对动画进行随时的控制,比如开始、暂停、后退、结束、取消等都是可以做到的。

  缺点:JavaScript动画代码的难度要高于CSS3动画,除此之外JavaScript在浏览器的主线程中运行,而这里还有其它的脚本要计算、绘制等,可能会干扰到动画的运行,出现丢失帧的情况。

  通过上面的对比大家可以很清晰的看到各自的优缺点,如果我们做的是pc端的页面更多的考虑的是用户体验上的流畅度,但是在移动端上我们还需要跟多的关注的是用户对于流量的使用情况,甚至还有当前移动设备的一个耗电量等等。关于流畅度,在现在网页动画的表现形式上目前是有2种的,分别是JavaScript动画与CSS3动画。JavaScript动画主要是通过js脚本语言动态的来实现动画效果,这也是我们在pc端兼容性比较好的一种动画实现方案;但是在移动端设备当中CSS3动画更胜一筹,主要是在于它的性能上比原生的要好。

  CSS3动画属性Animation,仅仅从Animation这个单词字面上的意思来看就是动画的意思,CSS3动画只能用在我们的网页结构当中已经存在的DOM元素上,这样的话我们可以不用写很多的js代码,这个对于不太熟悉JavaScript的开发人员来说是一件很值得庆幸的一件事情了,但是Animation动画也有自己的缺点,主要是因为它现在不是很完善还有很多的兼容性的问题存在。

  CSS3 Animation动画当中比较重点的一个东西就是Keyframes,我们把它叫做“关键帧,如果之前你接触过flash,那么Keyframes关键帧应该不会很陌生,之前我们在用transtion来制作一个过渡的动画效果的时候,我们可以控制一个动画开始和结束时候的属性,动画开始和延迟的时间和运动轨迹等等,这些东西都是动画在变化过程当中的某一个值,但是如果我们想要跟flash的效果一样,第一帧是要做什么,第二帧是要做什么动作,要是用transtion过渡动画来实现就很难了。

  那么我们要想实现跟flash一样的动画效果,就需要CSS3的Animation动画的“keyframes”这个属性来实现了,Keyframes的用法就是是由@keyframes开头的,后面写动画的名称加上一对花括号{},括号当中写我们想要的不同的样式,我们可以用form、to来表示一个动画从哪里开始到哪里结束,相当于我们的另外一种表示方式0%到100%,中间可以添加不同关键帧来写我们想要的变化过程,需要大家注意的就是,比如0%不能把百分符号省略到,如果没有添加,keyframes是无效的,不起任何作用。需要大家注意的就是keyframes的单位是百分比。

  上面的案例当中呢我们定义了一个叫mymove的动画,它的动画是从0%开始到100%结束,其中呢我们还设置了15%,30%,45%,60%,75%,90%6个过程动画,其实呢上面代码的具体意思是说mymove动画在0%时背景定位到0 0,然后到15%是元素背景的位置到-180px 0;以此类推最后到100%结束动画的位置元素又回到了起点0 0,假如我们给当前的这个动画设置了800ms的运动时间,那么它每一帧的运动效果如下:

  当我们定义好了Keyframes之后,需要怎么去调用定义好的动画“mymove”呢?下面我们通过一个案例来看一下怎样来使用animation动画属性:

  CSS Animation动画效果会直接影响到每个元素对应的CSS属性值,每个元素不同的变化都是由animation来进行控制的,每个动画后面的属性值都是会覆盖到前面的属性值,例如我们刚才设置的background-position当动画执行到不同的百分比情况下,它们只是不断的覆盖上一次出现的css属性。就像我们平时写的css样式一样,最后的样式会覆盖前面的样式,下面是一张w3c官网上对css3的animation变化过程的示意图:

  当我们同时给animation添加几个动画的时候,我们只需要用逗号“,”隔开就可以。

  属性值是1时,是默认值,当属性值是infinite表示的意思是无限循环的。

  alternate  动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。

  step-end 动画运动的时候从最后的端点作为开始点,这个是默认值 。

  本篇《CSS3动画特效详解》如上所述,希望能对大家学习CSS3动画有所帮助。

版权保护: 本文由 主页 原创,转载请保留链接: http://www.ecentiv.com//cms/565.html