【Web前端设计中基于CSS3的动画特效应用研究 3400字（论文）】_第1页
【Web前端设计中基于CSS3的动画特效应用研究 3400字（论文）】_第2页
【Web前端设计中基于CSS3的动画特效应用研究 3400字（论文）】_第3页
【Web前端设计中基于CSS3的动画特效应用研究 3400字（论文）】_第4页
【Web前端设计中基于CSS3的动画特效应用研究 3400字（论文）】_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端设计中基于CSS3的动画特效应用研究目录TOC\o"1-3"\h\u42681引言 1228592CSS3动画的基本原理 131153CSS3动画类型的技术剖析 130123.1transition动画技术 1186843.2animation动画技术 338984CSS32D、3D动画效果与控制 5279064.1动画效果 59154.2动画控制 6112155结论 615424参考文献 71引言CSS技术能够控制网页的布局，真正将页面内容与网页表现进行分离，但是很多效果还需要借助于图片和脚本来实现，不易于维护网页。CSS3.0新增了很多新属性，如设置颜色、设置阴影、设置不透明度等，可以让页面代码更加简单明了，实现了以往CSS都无法实现或难以实现的效果。特别是CSS3.0增设的动画属性，可以让网页开发人员不用再去书写繁杂的脚本，就能够直接让网页中的指定元素动起来，而不会影响页面的整体布局。高度跨平台自适应特性让HTML5逐步走向技术前沿，现在HTML5已经不仅仅代表HTML文档本身，还代表着以HTML为首的CSS3、JavaScript、jQuery等一系列技术的集合，让Web前端页面更加炫酷、更具用户友好性。传统的网页动画都是借助于Flash或JavaScript技术的，而基于CSS3技术的动画代码简单、高效等优势让设计师爱不释手，将会成为未来Web动画的主流。2CSS3动画的基本原理Web前端设计是我校移动应用技术与服务专业的一门核心专业课程。主要包含了HTML5、CSS3和JavaScript三大部分，其中CSS3在CSS基础上新增了许多特性，而CSS3动画技术则是众多特性中最突出的一个，它功能强大、代码简约、直观易懂、自适应性强、可跨平台使用，特别适合在Web前端设计中应用。图1补间动画原理在讲授CSS3动画技术时，首先要让学生了解电脑动画的基本原理，电脑动画分为三类：补间动画、逐帧动画和骨骼动画。而CSS3动画属于补间动画类型，如图1所示。补间动画就是在每一个关键帧上设置不同的位置、大小、形状和颜色等属性，CSS3动画将根据每两个关键帧的样式来平滑过渡地创建它们之间的动画。3CSS3动画类型的技术剖析3.1transition动画技术transition动画从效果上看是一种平滑过渡的动画，本质上是在线性时间内将属性从开始值过渡到结束值。用transition可以将属性值在指定时间内平滑过渡，优化用户体验。transition动画技术是在transform属性的基础之上，CSS3提供了位移、旋转、缩放、倾斜4种基本变换transform属性，可以实现对图形及文字的变换。位移属性的5种形式为：translate（x，y），在x轴和y轴方向的位置变化距离；translateX（x），在x轴方向的位置变化距离；translateY（y），在y轴方向的位置变化距离；translateZ（z），在z轴方向的位置变化距离；translate3d（x，y，z），在x轴、y轴和z轴方向的位置变化距离。缩放属性的5种形式为：scale（x，y），在x轴和y轴方向的缩放比例；scaleX（x），在x轴方向的缩放比例；scaleY（y），在y轴方向的缩放比例；scaleZ（z），在z轴方向的缩放比例；scale3d（x，y，z），在x轴、y轴和z轴方向的缩放比例。旋转属性的5种形式为：rotate（angle），定义2D旋转；rotate3d（x，y，z，angel），定义3D旋转；rotateX（angel），在x轴方向的3D旋转；rotateY（angle），在y轴方向的3D旋转；rotateZ（angle），在z轴方向的3D旋转。倾斜属性的3种形式为：skew（x-angle，y-angle），沿x轴和y轴方向的2D倾斜转换；skewX（angle），沿x轴方向的2D倾斜转换；skewY（angle），沿y轴方向的2D倾斜转换。例如：利用transition技术制作动画，效果是当鼠标放到竖向的圆角矩形上时，图形变为横向的圆角矩形，并且可以观察到整个动画的平滑过渡。动画运行效果如图2所示。图2动画运行效果案例技术分析：在CSS样式中定义了一个叫“circle”的类，规定它的宽、高、背景、边框、外边距等样式，指定它的动画在1s内完成宽和高的变化，动画效果逐渐变慢。定义“circle”类的动作是当鼠标浮上时交换宽和高的值。在<body>中插入一个类名叫“circle”的<div>。代码如下：<metacharset="utf-8"/><styletype="text/css">background-color:red;}}<divclass="circle"></div>3.2animation动画技术由于transition动画只能规定从一个属性平滑过渡到另一个属性，所以无法完成复杂的动画编辑。图3animation动画设计的重要步骤animation动画借助关键帧的设计，可以对一个元素设置多步骤的属性变换，关键帧的位置用百分比表示。animation动画设计的重要环节如图3所示。关键帧规则：@keyframes动画名称｛0%｛样式要求｝25%｛样式要求｝50%｛样式要求｝75%｛样式要求｝100%｛样式要求｝｝，通过关键帧来定义不同位置的动画样式；总时间规则：通过animation-duration属性来指定动画效果的持续时间，持续时间越长，动画效果越慢；其他重要属性和值规则：（1）animation-delay属性指定动画延迟播放的时间，延迟时间越长则动画播放得就越晚；（2）nimation-direction属性指定动画播放的运动方向，其中normal表示正常方向运行动画，reverse表示反方向运行动画，alternate表示正反方向交替运行动画，alternate-reverse表示反正方向交替运行动画；过渡效果规则：通过animation-timing-function属性来指定动画的过渡效果，取值有6种形式：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier；循环次数规则：通过animation-iteration-count属性设置动画是无限循环播放还是指定播放次数，取值有2种形式infinite/<数值>。例如：制作一个沿规定路径运行的动画，在运行过程中图形的形状在不断发生变化，运行次数是无限循环的，动画效果如图4和图5所示，体现出不同位置处的运行效果。图4动画运行效果1图5动画运行效果2案例技术分析：在CSS样式中定义一个叫“path”的类，规定它的宽、高、边框、外边距和倒角等样式。又定义一个叫“box”的类，规定它的位置是相对定位，并且距左边和上边值都是0像素，定义它的动画名称是Move，在4s内均匀完成一个周期的运动，并无限次循环。定义第3个类中的“circle”类，规定它的宽、高、背景、边框、倒角、透明度等样式，定义它的动画名称是State，在5s内均匀完成形状变化，并无限次循环。定义2个动画Move和State：State动画有2个关键帧，在50%处交换宽和高的值，100%处恢复原来的宽和高；Move动画有4个关键帧，分别在25%、50%、75%、100%处规定图形的位置。最后在<body>中分别插入嵌套3个<div>类名是“path”，“box”，“circle”，完成动画制作。代码如下：<metacharset="utf-8"/><styletype="text/css">}position:relative;}background-color:#17A05D;transform:translate(-50%,-50%);opacity:0.7;}}}4CSS32D、3D动画效果与控制4.1动画效果CSS3的出现，为网页增添了不少动画元素，并且更加容易实现交互，在过去需要依赖于Flash和JavaScript，现在基本依靠CSS3就可以做到[3]。CSS中从一种样式逐渐变化到另一种样式就称为过渡（transition），利用transition属性再加上-webkit-私有前缀[4]，有了私有前缀-webkit-就可以在Android和IOS跨平台APP开发中使用，很容易就实现了相应的功能。例如：(1)div{width:100px;height:100px;background:blue;-webkit-transition:width2s;}//设置了矩形框宽度变化时间为2s。(2)div:hover{width:300px;}//鼠标放上去后矩形框宽度逐渐延伸到300px，过渡时间为2s。CSS32D动画转换可以对元素进行平移（:translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等，例如：(3)-webkit-transform:translate(50px,100px);//水平向右偏移50像素，垂直向下偏移100像素。(4)-webkit-transform:rotate(60deg);//围绕中心点顺时针旋转60度。(5)-webkit-transform:scale(0.5,0.5);//宽度和高端缩小为原来的一半。(6)-webkit-transform:skew(10deg,10deg);//相对于X轴和Y轴倾斜10度。相对2D动画，3D动画其实就是让元素围绕X轴、Y轴进行旋转，X轴旋转（rotateX）与Y轴旋转（rotateY），例如：(7)-webkit-transform:rotateX(60deg);//围绕X轴顺时针旋转60度，因为是正数，所以是顺时针，反之就是逆时针。(8)-webkit-transform:rotate(60deg);//围绕Y轴顺时针旋转60度，因为是正数，所以是顺时针，反之就是逆时针。4.2动画控制CSS3除了过渡（transition）、变换（transform）等特效，为了更好地进行动画控制还提供了很重要的动画控制属性animation，从而可以来控制更加复杂的动画效果，例如控制动画播放、暂停、次数等。-webkit-animation:nameduraitiontiming—funcationdelayiteration—countdirection/*name：用@keyframes动画规则名duraiton：动画花费时间timing-function：动画速度曲线delay：动画延迟时间iteration-count：动画播放次数direction：动画逆向播放*/@-webkit-keyframes动画规则名{from{/*CSS属性设置*/}to{/*CSS属性设置*/}}//设置起始和终止的动画帧5结论CSS3作为CSS技术的最新升级版本，新增了很多的特性，很多以前需要使用图片和脚本来实现的动画，现在使用CSS3只需几行代码就能实现。把我们从大量的绘图、切图和优化图片的工作中解放出来，我们在制作动画时不需要再去寻找合适的脚本插件并修改以适配网站特效。CSS3技术让网页结构变得更加简单、清晰、明了，可以提高开发者的工作效率、减少开发时间、降低开发成本。同时CSS3动画技术也有利于打造更好的用户体验，使Web应用的界面进入一个全新阶段。参考文献[1]李晓斌.HTML5+CSS3+jQueryMobile移动网站与APP开发实战[M].北京:人民邮电出版社,2018:6.[2]李维旺.基于网页重构的网络用户体验优化研究与实现[D].电子科技大学,2018.[3]陆郁.探析CSS技术在网页制作中的应用与代码优化[J].科技风,2019(01):110.[4]李微.HTML5+CSS3在网页设计中的特性及优势[J].信息与电脑(理论版),2018(22):13-15.[5]张静.CSS技术在网页设计中的应用研究[J].无线互联科技,2018,15(15):141-142.[6]高春燕.HTML5和CSS3.

人人文库> 全部分类> 行业资料 > 工业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论