html动画制作

一、2D 转换之 translate
1、 2D 转换
2D 转换是改变标签在二维平面上的位置和形状
移动： translate
旋转： rotate
缩放： scale

2、 translate 语法
x 就是 x 轴上水平移动
y 就是 y 轴上水平移动

transform: translate(x, y) 
transform: translateX(n) 
transfrom: translateY(n)

3、重点知识点
2D 的移动主要是指 水平、垂直方向上的移动
translate 最大的优点就是不影响其他元素的位置
translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
行内标签没有效果

4、代码演示

div { 
background-color: lightseagreen; 
width: 200px; 
height: 100px; 
/* 平移 */ 
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */ 
/* 垂直移动 100px */
/* transform: translate(0, 100px) */ 
/* 水平移动 100px */ 
/* transform: translateX(100px); */ 
/* 垂直移动 100px */
transform: translateY(100px) 
}

二、2D 转换 rotate
1、rotate 旋转
2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

2、rotate 语法

/* 单位是：deg */ 
transform: rotate(度数)

3、 重点知识点
rotate 里面跟度数，单位是 deg
角度为正时，顺时针，角度为负时，逆时针
默认旋转的中心点是元素的中心点

4、 代码演示

img:hover { 
transform: rotate(360deg)
}

5、设置元素旋转中心点(transform-origin)
5.1 transform-origin 基础语法

transform-origin: x y;

5.2 重要知识点
注意后面的参数 x 和 y 用空格隔开
x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
还可以给 x y 设置像素或者方位名词( top 、 bottom 、 left 、 right 、 center )

三、2D 转换之 scale
1、scale 的作用
用来控制元素的放大与缩小

2、 语法

transform: scale(x, y)

3、知识要点
注意，x 与 y 之间使用逗号进行分隔
transform: scale(1, 1) : 宽高都放大一倍，相当于没有放大
transform: scale(2, 2) : 宽和高都放大了二倍
transform: scale(2) : 如果只写了一个参数，第二个参数就和第一个参数一致
transform:scale(0.5, 0.5) : 缩小
scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

4、代码演示

div:hover { 
/* 注意，数字是倍数的含义，所以不需要加单位 */ 
/* transform: scale(2, 2) */
 /* 实现等比缩放，同时修改宽与高 */
  /* transform: scale(2) */ 
  /* 小于 1 就等于缩放*/ 
  transform: scale(0.5, 0.5) }

四、2D 转换综合写法以及顺序问题
1、 知识要点
同时使用多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
但我们同时有位置或者其他属性的时候，要将位移放到最前面

2、代码演示

div:hover { 
transform: translate(200px, 0) rotate(360deg) scale(1.2) 
}

五、动画(animation)
1、什么是动画
动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

2、动画的基本使用
先定义动画
在调用定义好的动画

3、语法格式(定义动画)

@keyframes 动画名称 {
    0% {width: 100px; 
       }
    100% {width: 200px 
 		} 
 	}

4、语法格式(使用动画)

div {
/* 调用动画 */ 
animation-name: 动画名称; 
/* 持续时间 */ 
animation-duration: 持续时间； 
}

5、动画序列
0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次
数
用百分比来规定变化发生的时间，或用 from 和 to ，等同于 0% 和 100%

6、代码演示

<style> 
	div {
      
		width: 100px