HTML----CSS制作网页动画
实现方式
- 动态图片
- Flash
- JavaScript
CSS3变形
CSS3变形是一些效果的集合,包括平移、旋转、缩放、倾斜效果。每个效果都可以称为变形(transform),它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。
语法
transform:[transform-function]*;
#[设置形变函数,可以是一个,也可以是多个,中间空格分开]
形变函数
translate()
平移函数,基于X、Y坐标重新定位元素的位置。
语法
translate(tx, ty);
#说明
tx:x轴移动的向量长度
ty:y轴移动的向量长度
一个方向上的偏移
translateX(tx)
表示只在X轴的位移。
transform:tanslate(100px, 0) == transform:translateX(100px)
translateY(ty)
表示只设置Y轴的位移。
transform:translate(0, 100px) == transform:translateY(100px)
scale()
缩放函数,可以使任意元素对象尺寸发生变化。scale()函数可以只接收一个值,也可以接收两个值,只有一个值时,第二个值默认和第一个值相等。
语法
scale(sx, sy);
#说明
sx:横向坐标(宽度)方向的缩放量
sy:纵向坐标(高度)方向的缩放量
单向缩放
scaleX(sx)
表示只设置X轴的缩放。
transform:scale(2, 0) == transform:scaleX(2)
scaleY(sy)
表示只设置Y轴的缩放。
transform:scale(0, 2) == transform:scaleY(2)
rotate()
旋转函数,取值是一个度数值。
语法
rotate(a);
#
参数a单位使用deg表示(deg是角度单位,英文是degree,计量中一般用来表示角度数。)
参数a取正值时元素相对原来中心顺时针旋转
skew()
倾斜函数,取值是一个度数值。
语法
skew(ax, ay)
#说明
ax:水平方向的倾斜角度
ay:垂直方向的倾斜角度
可以设置仅沿X轴或Y轴方向的倾斜
- skewX(ax):表示只设置X轴的倾斜
- skewY(ay):表示只设置Y轴方向的倾斜
浏览器支持
属性名 | IE | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
2D transform | 9+ | 3.5+ | 4.0+ | 10.5+ | 3.1+ |
rotate()和skew()函数的区别
- rotate()只是旋转,而不会改变元素的形状。
- skew()是倾斜,元素不会旋转,会改变元素的形状。
CSS3过渡
transition呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等,他的过渡功能更像一种"黄油",通过CSS的简单动作触发样式平滑过渡。
语法
transition:[transition-property transition-duration transition-timing-function transition-delay]
#说明
transition-property:过渡或动态模拟的CSS属性
transition-duration:完成过渡所需要的时间
transition-timing-function:指定过度函数
transition-delay:过渡开始出现的延迟时间
过渡使用的各种参数
过渡属性(transition-property)
定义转换动画的CSS属性名称
- IDENT:指定的CSS属性(width、height、background-color属性等)
- all:指定所有元素支持transition-property属性的样式,一般为了方便都会使用all
过渡所需的时间(transition-duration)
定义转换动画的时间长度,即从设置旧属性到换新属性所花费的时间,单位为(s)
动画过渡函数(transition-timing-function)
指定浏览器的过渡速度,以及过渡期间的操作进展情况,通过给过度添加指定动画的快慢方式。
- ease:速度由快到慢(默认值)
- linear:恒速(匀速运动)
- ease-in:速度越来越快(渐显效果)
- ease-out:速度越来越慢(渐隐效果)
- ease-in-out:速度先加速再减速(渐显渐隐效果)
过渡延迟时间(transition-delay)
指定一个动画开始执行的时间,当改变元素属性值后多长时间去执行过渡效果。
- 正值:元素过渡效果不会立即触发,当过了设置的时间值之后才会被触发。
- 负值:元素过渡效果会从该时间点开始显示,之前的动作被截断。
- 0:默认值,元素过渡效果会立即执行。
过渡的触发机制
伪类触发
- :hover
- :active
- :focus
- :checked
媒体查询
通过@media属性判断设备的尺寸,方向等
JavaScript触发
用JavaScript脚本触发。
transition实现过渡动画步骤
- 在默认样式中声明元素的初始状态样式
- 声明过渡元素最终状态样式,如悬浮状态
- 在默认样式中通过添加过渡函数,添加一些不同的样式。
CSS3动画
animation动画简介
animation实现动画主要由两个部分组成。
- 通过类似Flash动画的关键帧来声明一个动画
- 在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果。
浏览器支持
属性名 | IE | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
animation | 10+ | 5.0+ | 4.0+ | 12+ | 4.0+ |
CSS3动画使用
设置关键帧
语法
@keyframes IDENT{
from{/*CSS样式*/}
percentage{/*CSS样式*/}
to{/*CSS样式*/}
}
#例如:
@keyframes apread{
0%{width:0;}
33%{width:23px;}
66%{width:46px;}
100%{width:69px;}
}
@keyframes的浏览器兼容性
属性名 | IE | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
@keyframes | 10+ | 5.0+ | 4.0+ | 4.0+ | 12.0+ |
注意:写兼容的时候浏览器前缀是放在@keyframes中间。
@-webkit-keyframes、@-moz-keyframes
调用关键帧
语法
animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode;
#说明
animation-name:由@keyframes创建的动画名称
animation-duration:动画时间
animation-timing-function:动画方式
animation-delay:延迟时间
animation-iteration-count:动画的播放次数
animation-direction:动画的播放方向
animation-play-state:动画的播放状态
animation-fill-mode:动画开始之前和结束之后发生的操作
动画的播放次数(animation-iteration-count)
- 值通常为整数,默认值为1
- 特殊值infinite,表示动画无限次播放
动画的播放方向(animation-direction)
- normal, 动画每次都是循环向前播放
- alternate,动画播放为偶数次则向前播放
动画的播放状态
- running将暂停的动画重新播放
- paused将正在播放的元素动画停下来
动画发生的操作(animation-fill-mode)
- forwards表示动画在结束后继续应用最后关键帧的位置
- backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
- both表示元素动画同时具有forwards和backwords的效果