使用HTML语言和CSS开发商业站点_利用CSS3制作网页动画

第9章利用CSS3制作网页动画
一.CSS3变形
1.变形简介
CSS3变形是一些效果的集合，如平移，旋转，缩放，倾斜效果，每个效果都可以称为变形（transform），它们可以操控元素发生平移，旋转，缩放，倾斜等变化。
语法：transform:[transform-function]*;
设置变形函数，可以是一个，也可以是多个，中间以空格分开。
translate（）:平移函数，基于X，Y坐标重新定义元素的位置。
scale（）：缩放函数，可以使任意元素对象尺寸发生变化。
rotate（）：旋转函数，取值是一个度数值。
skew（）：倾斜函数，取值是一个度数值。
CSS3 3D变形函数：translated3d()平移函数，scale3d()的缩放函数，rotate3d()旋转函数。
2.浏览器兼容性
具体哪个浏览器版本支持什么样的CSS属性，看http：//www.caniuse.com;
3.2D变形
（1）.2D位移
translate(tx,ty);
注意：当translate（）函数只有一个值的时候，则表示水平位移；如果只设置垂直位移；就必须设置第一个参数为0，第二个值是垂直偏移量。
其它形式：translateX（tx）：
translatex（tx）：/*大小写都可以 Y轴也是同样的道理*/
（2）.2D缩放
scale（）函数能够用来缩放元素大小，该函数包含两个参数值，默认值为1.只有一个值时，第二个默认值和第一个相等。
语法：scale（sx，sy）或scale（sx）
scaleX（sx）：
scalex（sx）：/*大小写都可以 Y轴也是同样的道理*/
（3）.2D倾斜
语法：skew（ax，ay）或skew（ax）
（4）.2D旋转
rotate（）函数能够让元素在二维空间里绕着一个指定的角度旋转1，这个元素对象可以是行内元素也可以是块元素。
语法：rotate（a）；/*a的取值为正值，元素相对原来中心顺时针旋转......*/
rotate（）函数只是旋转，而不会改变元素的形状。skew（）函数是倾斜，元素不会旋转，会改变元素的形状。
二.CSS3过渡
CSS3中过渡（transition）和animations两种方法都可以实现动画交互效果。
1.过渡简介
transform呈现的是一种变形的结果，而transition呈现的是一种过渡，是一种动画转换的过程，如渐现，渐弱，动画快慢等。CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡。
2.过渡属性的使用
语法：transition:[transition-property transition-duration transition-timing-function transition-delay]*
transition-property:指定过渡或动态模拟的CSS属性。
transition-duration:指定完成过渡所需要的时间。
transiton-timing-function:指定过渡函数。
transiton-delay:指定过渡开始出现的延迟时间。（四个属性之间以空格分隔）
（1）过渡属性
transition-property属性用来定义转换动画的CSS属性名称，常用属性：
IDENT：指定的CSS属性（width，height，background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all。
（2）过渡所需的时间
transition-duration属性用来定义转换动画的时间长度，即从设置从旧属性到新属性所花费的时间，单位为s。
（3）过渡动画函数
transition-timing-function属性用来指定浏览器的过渡速度，以及过渡期间的操作进展情况。
ease：元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢（默认值）。
linear：元素样式从初始状态过渡到终止状态时速度恒速（匀速）。
ease-in：元素样式从初始状态过渡到终止状态时速度越来越快（渐显效果）。
ease-out：元素样式从初始状态过渡到终止状态时速度越来越慢（渐隐效果）。
ease-in-out：元素样式从初始状态过渡到终止状态时速度先加速再减速（渐显渐隐效果）。
（4）过渡延迟时间
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发。
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断。
0：默认值，元素过渡效果立即执行。
3.过渡的触发机制
伪类触发：：hover，：active，：focus，：checked等
媒体查询：可以通过@media属性判断设备的尺寸，方向等。
JavaScript触发：用JavaScript脚本触发。
使用transition实现过渡动画的使用步骤
（1）在默认样式中声明元素的初始状态样式
（2）声明过渡元素最终样式状态，如悬浮状态
（3）在默认样式中通过添加过渡函数，添加一些不同的样式。
三.CSS3动画
1.CSS3动画简介
transition和animation在实现动画的方式上的区别
（1）transition属性通过指定属性的初始状态和结束状态在两个状态之间进行平滑过渡的方式来实现动画。
（2）animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画。
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果。
2.CSS3动画的使用过程
使用animation制作动画的步骤：
（1）通过关键帧（@keyframes）来声明一个动画。
（2）找到要设置动画的元素，并且调用关键帧声明的动画。
（1）设置关键帧
语法：@keyframes IDNET{
from{/*CSS样式写在这里*/}
percentage{/*CSS样式写在这里*/}
to{/*CSS样式写在这里*/}
}
也可以将关键词from和to换成百分比，即：
@keyframes IDNET{
0%{/*CSS样式写在这里*/}
percentage{/*CSS样式写在这里*/}
100%{/*CSS样式写在这里*/}
}
其中IDNET就是一个动画名称，percentage就是一个百分比，用来定义某个时间段的动画效果。
（2）调用关键帧
animation和transition的区别：
（1）transition实现动画需要触发一个事件（hover事件，active事件等）。
（2）animation可以在不触发任何事件的情况下也能随着时间的变化来改变元素的CSS属性值，
从而达到一种动画的效果。
语法：animation：animation-name animation-duration animation-timing-function animation-delay
animation-iteration-count animation-direction animation-play-state
animation-fill-mode;
速记公式：动画名称动画的播放时间动画的播放方式开始播放动画的时间动画的播放次数（
特殊值infinite，表示动画无限次播放）动画的播放次数动画的播放方向
（normal表示动画每次都是循环向前播放，alternate表示动画播放为偶数次则向前
播放，奇数次则向反方向播放）动画的播放状态（paused将正在播放的动画停
下来，running将暂停的动画重新播放）动画的时间外属性（定义在动画开始之前和结束
之后发生的操作。其取值为forwards表示动画在结束后继续应用最后关键帧
的位置，取值为backwards表示会在向元素应用动画样式时迅速应用动画的初始帧，取值
为both表示元素动画同时具有forwords和backwards的效果）。

使用HTML语言和CSS开发商业站点_利用CSS3制作网页动画相关推荐

使用HTML语言和CSS开发商业站点_初识CSS
第4章初识CSS 一.CSS概述 1.什么事CSS CSS全称为层叠样式表(Cascading Style Sheet),通常又称为风格样式表(Style Sheet),它是 ...
html css 开发商业站点,《使用HTML语言和CSS开发商业站点》
其中包含了html文本语言的全部单词第一学期英语单词--<使用HTML语言和CSS开发商业站点> chapter1 head [hed]头 title ['taitl] 标题 body ...
accp使用html语言,Accp6.0_S1.使用HTML语言和CSS开发商业站点
课程"Accp6.0_S1.使用HTML语言和CSS开发商业站点"题库试题汇编 [001]以下()是HTML常用的块状标签 (选择一项) A) B) C) D) [002]以下( ...
使用HTML语言和CSS开发商业站点_HTML基础
使用HTML语言和CSS开发商业站点第一章 HTML基础 WEB页面呈现信息已成为各种信息共享和发布的主要形式超文本标记语言(Hyper Text Markup Lanuage,HTML)或超文本 ...
使用HTML语言和CSS开发商业站点
学习目标学习完本课程后,能够: 使用HTML进行网页布局使用CSS3美化网页制作精美的商业网站一.HTML5基础 1.1 HTML简介什么是HTML HTML的全称为超文本标记语言,是一种标 ...
《使用HTML语言和CSS开发商业站点》学习笔记
第一章 1.public 公共的 2.static 静态的 3.void 无返回值的 4.main 主方法 5.class ...
HTML语言和CSS开发商业站点错题
1.关于css为什么会出现Bug说法不正确的是(). (选项两项) A.编写CSS样式是需要在不同浏览器中实现表现一致 B.各大主流浏览器由于不同厂家开发,浏览器使用的内核不同,支持CSS的程度不同 ...
题库明细使用HTML+CSS开发商业站点
题库明细使用HTML+CSS开发商业站点 HTML5基础列表.表格与媒体元素表单初识CSS3 CSS3美化网页元素盒子模型浮动定位网页元素利用CSS3制作网页动画
使用HTML语言和 CSS 开发一到三总结
使用HTML语言和 CSS 开发一到三章总结第一章:HTML5 基础 1.1 HTML文件的基本结构和 W3C 标准在网络已经完全融入大家的生活的时代,从网络上获取信息或通过网络反馈个人信息,这些 ...
css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...

使用HTML语言和CSS开发商业站点_利用CSS3制作网页动画

使用HTML语言和CSS开发商业站点_利用CSS3制作网页动画相关推荐

最新文章

热门文章