HTML CSS整理笔记 (九) CSS3做网页动画

作者: web 发布时间: 2019-11-08 浏览: 1690 次 编辑

完成笔记链接:https://www.niwoxuexi.com/blog/web/article/1245

——9 CSS3做网页动画——

54.transform变形:

指效果的集合,如平移、旋转、缩放、倾斜效果。

语法 transform:[transform-function]*;

其中transform-function是变形函数,如要设置多个,则中间以空格分开。在用2D变形时要加浏览器兼容性前缀。

常用2D变形函数如下:

(1)translate(tx,ty):

  • 平移函数,将元素从原位置(基于X,Y坐标)移动到指定位置上。
  • tx表示X轴(横坐标)上移动的向量长度,正值向右,负值向左。
  • ty表示Y轴(纵坐标)上移动的向量长度,正值向下,负值向上。

(2)scale(sx,sy):

  • 缩放函数,定义宽高度(元素尺寸)的缩放比例,默认值1。0~0.99缩小,大于1放大。
  • sx表示宽度即横坐标方向的缩放量。
  • sy表示高度即纵坐标方向的缩放量。

(3)rotate(a);

  • 旋转函数,只取一个值为度数值,单位deg表示角度°
  • 正值顺时针转,负值逆时针转。
  • rotate函数只旋转,不改变元素形状。

(4)skew(ax,ay):

  • 倾斜函数,取值为度数值,单位deg
  • ax表示水平方向即X轴的倾斜角度。
  • ay表示垂直方向即Y轴的倾斜角度。

55.3D变形函数:translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数

56.transition过渡:

指动画转换的过程,如渐现、渐弱、动画快慢等。

通过指定属性的初始状态、结束状态,在两个状态间通过平滑过渡的方式实现动画。

语法:[transition-property transition-duration

transition-timing-function transition-delay]*

(速记法)transition: 过渡属性 过渡用时 过渡的动画函数 过渡的延迟时间

主要包括四个属性值:

(1)transition-property:

过渡属性,设置过渡或动态模拟的CSS属性

(2)transition-duration:

过渡用时,从旧属性到新属性的用时,单位为s

(3)transition-timing-function:

指定过渡函数、过渡速度,有以下方式:

  • ease 速度由快到慢,逐渐变慢(默认)
  • liner 匀速
  • ease-in 越来越快(渐显)
  • ease-out 越来越慢(渐隐)
  • ease-in-out 先加速再减速(渐显渐隐)

(4)transition-delay:设置过渡是否延迟时间执行。

注意:transition-duration指完成过渡需要的时间;transition-delay指过渡在什么时间之后触发。

57.总结如何用transition实现过渡动画:

(1)在默认样式中声明元素的初始状态。

(2)声明过渡元素之中状态样式,如悬浮状态

(3)在默认样式中通过添加过渡函数,添加不同的样式。

58.过渡的触发机制:

(1)伪类触发: :hover、 :active、 :focus、 :checked等

(2)媒体查询:通过@media属性判断设备的尺寸、方向等。

(3)JavaScript触发:用JavaScript脚本触发。

59.animation动画

animation制作动画的步骤:

(1)通过类似Flash动画的关键帧(@keyframes)声明一个动画;

其中@keyframes称为关键帧,可以设置多段属性。语法

@keyframes 动画名称{
 from{ //css样式代码 }
 百分比1{ //css样式 }
 百分比2{ //css样式 }
 100%{ //css样式 }
}

(2)找到要设置动画的元素,调用关键帧已声明的动画。

如 animation: spread(动画名) 2s linear(匀速);

60.animation动画的语法和属性:

" animation: 动画名称 播放时间 播放方式 开始播放的时间 播放次数 播放方向 播放状态 动画时间之外的状态 "

其中属性分别为:

  • animation-name 动画名称、
  • animation-duration 播放时间、
  • animation-timing-function 播放方式、
  • animation-delay 开始播放的时间、
  • animation-iteration-count 播放次数(无限次用infinite)、
  • animation-diriection 播放方向、
  • animation-play-state 播放状态、
  • animation-fill-mode 动画时间之外的状态、


HTML CSS整理笔记更多笔记

HTML CSS整理笔记(一)HTML5基础

HTML CSS整理笔记(二)列表、表格、媒体元素

HTML CSS整理笔记 (三)表单

HTML CSS整理笔记(四)CSS3基础

HTML CSS整理笔记(五) CSS3美化网页

HTML CSS整理笔记(六)盒子模型

HTML CSS整理笔记 (七) 浮动

HTML CSS整理笔记 (八) 定位网页元素

HTML CSS整理笔记 (九) CSS3做网页动画

HTML CSS整理笔记 (十)HTML部分