版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
Web前端开发技术变形、过渡与动画项目七
首页引入过渡、变形、动画效果目录CONTENT设置动画效果的方法制作动画片段12本任务首先介绍动画效果的基础知识，然后通过为页面侧边栏添加动画效果，练习在网页中应用动画效果的方法。动画效果使用transition属性只能在一个开始值与一个结束值之间添加过渡效果，无法设置中间值，而CSS3中的动画功能不仅可以制作出过渡效果，还可以通过设置关键帧制作变化多样的动画片段。关键帧制作动画必须先设置关键帧，一个关键帧代表动画变化过程中的一个状态。在CSS3中，使用@keyframes命令定义关键帧，具体格式为：@keyframesname{selector{css-styles;}}name表示动画名称selector表示关键帧的时间位置，也就是动画时长的百分比，还可以使用参数from(等价于0%)和to(等价于100%)表示动画的开始和结束css-styles表示对应关键帧的样式属性，可以设置多个属性在CSS3中，使用animation-name属性设置要应用的动画名称，具体格式为：动画效果相关属性动画名称animation-name:namelnonename表示动画名称，属性值为想要应用的@keyframes动画名称none表示不应用或取消动画动画效果相关属性在CSS3中，使用animation-duration属性设置动画效果播放一次的时长，具体格式为：animation-duration:time;设置方法与transition-duration属性相同。动画时间动画效果相关属性在CSS3中，使用animation-timing-function属性设置动画效果的速度曲线，具体格式为：animation-timing-function:cubiczier(n,n,n,n)llinerleaselease-inlease-out;设置方法与transition-timing-function相同。动画的速度曲线动画效果相关属性4.延迟时间在CSS3中，使用animation-delay属性设置动画开始之前需要等待的时间，具体格式为：animation-delay:time;设置方法与transition-duration属性相同动画效果相关属性在CSS3中，使用animation-iteration-count属性设置动画播放的次数，具体格式为：animation-iteration-count:numberlinfinite播放次数number表示动画播放的次数，属性值为正整数，默认值为1infinite表示循环播放制作带有动画效果的照片墙的演示制作带有动画效果的照片墙的演示<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title></title> <style> img{
width:150px; display:inline-block; margin-left:25px; padding:15px; box-shadow:03px6px#555555; } div{ position:relative; perspective:300px; } img:hover{ animation:move1.5s; } @keyframesmove{ 25%{
transform:rotateY(5deg); } 75%{
transform:rotateY(-5deg); } } </style>
</head><body> <div> <imgsrc="images/ex_4.png"style="transform:rotate(-5deg);position:absolute;top:65px;left:10px;"/> <imgsrc="images/ex_5.png"style="transform:rotate(-2deg);position:absolute;top:25px;left:210px;"/> <imgsrc="images/ex_6.png"style="transform:rotate(2deg);position:absolute;top:65px;left:410px"/> <imgsrc="images/ex_7.png"style="transform:rotate(5deg);position:absolute;top:25px;left:620px;"/> </div> </body></html>代码解释：img:hover{animation:move1.5s;}
/*设置鼠标指针移动至图像元素上时应用动画move,时长为1.5秒*/@keyframesmove{
25%{transform:rotateY(5deg);}
/*设置第一个关键帧的3D变形效果为绕y轴顺时针旋转5度*/75%{transform:rotateY(-5deg);}}
/*设置第二个关键帧的3D变形效果为绕y轴逆时针旋转5度*/代码解释：img:hover{animation:move1.5s;}
/*该动画效果为：当鼠标指针移动至图像元素上时，图像元素在三维坐标系中先绕y轴顺时针旋转5度再逆时针旋转10度(先旋转5度变为rotateY(0),再继续旋转5度),最后恢复原状，总时长共1.5秒*/提示提示：与transit
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论