第九章

Posted 2020-10-06 FANKEXIN

如何在网页中实现动画效果
动态图片
flash
javascript
css3变形是一些效果的集合
如平移 旋转 缩放 倾斜效果
每个效果都可以称为变形（transfrom）它们可以分别操控元素发生平移、旋转、缩放、倾斜等变换
语法
transform：[transfrom-function]*;
变形函数
translate（）：平移函数，基于X Y坐标重新定位元素位置
scale（）：缩放函数，可以是元素对象尺寸放生变换
rotate（）：旋转函数，取值是一个度数
skew（）：倾斜函数，取值是一个度数值
2D的位移
translate（tx, ty）
tx:X轴（横坐标）移动的向量长度
ty:Y轴（纵坐标） 移动的向量长度
2D缩放
scale（sx,sy）
sx:X轴（横坐标）方向的缩放量
sy:Y轴（纵坐标）高度方向的缩放量
scale（）函数可以只接受一个值，也可以接受两个值，只有一个值时，第二个默认和第一个值相等
2D倾斜
语法
skew{ax,ay}
ax:水平方向（X轴）的倾斜角度
ay:水平方向（Y轴）的倾斜角度
2D旋转
语法
rotate（a）;
参数a单位使用deg表示
参数a取正值时元素相对原来中心顺时针旋转
rotate（）函数只是旋转，而不会改变元素形状
skew（）函数是倾斜，元素不会旋转，会改变元素形状

css3过渡
语法
transition:{transition-property transition-duration transition-timing-function transition-delay}

transition-property:过渡或动态模拟css属性
transition-duration完成过渡需要的时间
transition-timing-function 指定过渡函数
transition-delay过渡开始出现的延迟时间

过渡属性（transition-property）
定义转换的css的属性名称
IDEBT 指定css属性
width height background-color 属性等

all 指定所有元素支持transition-property属性样式，一般为了方便都是用all

过渡所需的时间（transition-duration）
定义转换动画时间长度，即从设置就属性到换新属性所花费的时间。单位秒（s）

过度动画的函数（transition-timing-function）
指定浏览器的过渡速度 以及过渡期间的操作进展情况通过给过渡添加一个函数来指定动画快慢速度
ease 速度由快到慢（默认值）
liner：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out速度先加速在减速（渐显渐隐效果）

延迟的时间（transition-delay）

指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果

正值 元素过渡效果不会立即触发，当过了设置时间值才会被触发

负值 元素过渡效果会从该时间点开始显示，之前的动作被截断

0默认值，元素过渡效果立即执行

过渡的触发机制
伪类触发
：hover
：active
：focus
：checked

媒体查询：通过@media属性判断设备尺寸方向等
JavaScript：用JavaScript脚本触发

使用transition实现过渡动画使用步骤
在默认样式中声明元素的初始样式
声明过渡元素最终状态样式，如悬浮状态
在默认样式中通过添加过渡函数，添加一些不同样式

css动画

animation实现动画主要两个部分组成
通过类似flsah 动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

设置关键帧
@keyframes IDENT｛
from｛ｃｓｓ样式写在这里｝
percentage｛ｃｓｓ样式写在这里｝
to{css样式在这里}
｝

css3动画制作步骤
设置关键帧