css3动画（2D）

响应式布局

1.使用相对单位 % rem vh vw
2.使用媒体查询，相当于在不同的情况下写了一套CSS样式
3.借助UI 框架，因为UI是别人封装好的响应式。希望有一天我们可以做封装框架的人

###媒体查询
1.语法结构
~~css
media 媒体设备 and (条件){
选择器{
属性：值；
}
}
[email protected] 表示媒体查询
-screen 表示查询设备：媒体设备是一个变量，在什么设备下就使用什么设备；
speecn 阅读设备 all 所有设备 screen 手机电脑平板

-and 链接符号：并列条件
-（屏幕条件）
-max-width：230px：表示在 230px以下 的尺寸中，使用媒体样式。
-min-width: 230px: 表示在 大于230px 尺寸中使用媒体样式
-总结：max 指的是屏幕最大时候；也就是当屏幕小于最大屏幕时，条件成立
min 屏幕最小时，也就是当屏幕大于最小屏幕时，条件成立

注意：媒体查询：使用方式
1.以一个端为主项目，它的样式，我们正常写的；
2.需要兼容的端，它的样式，我们写在媒体查询中；
3.兼容性问题：IE10以下不兼容；

###过渡
作用：在某个时间段可以显示css中某个属性值的变化过程；
-transition 有多个值
-语法 transition：属性 时间，属性 时间；
-值为all 表示选中所有属性
-transition-property:表示过渡属性
-transition-duration:过渡属性所需要时间
-transition-delay:过度需要多少时间；

动画

使用动画流程
-1.定义动画 @keyform
-2.执行动画 animation
定义动画
from 从什么样式 to 到什么样式的动画执行过程

    animation 定义的动画想要执行：需要名字，执行时间，执行次数等

2D

transform 将元素应用 2D 或 3D 转换。

translate() 移动

• 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
  rotate() 旋转
• 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
  实例
• 例如：值 rotate(30deg) 把元素顺时针旋转 30 度。
• 作用：元素以自己的重心为原点进行旋转；
  参数为旋转度数：正数为顺时针旋转 负数为逆时针旋转

scale() 缩放

• 值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew() 拉伸

• 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
• 实例：值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

matrix() 六个函数之和

###3D
应用场景:实现酷炫效果，在实际开发过程中；一般不会用到；用的都是第三方库；

transform:决定元素2d 还是3d
具体2d 3d的变化走势，由函数决定 函数xxxx()
translate(300px 0px)
一个函数可以有多个函数
一个函数会输出一个结果
translate() 实现的效果；就是这个函数输出的结果
300px 0px 是translate的参数

     translate() 作用改变元素位置的变化
     参数一：为X轴位置移动
     参数二：为Y轴位置移动 正值向下 负值向上

写代码注意事项

css样式代码：
-先写盒子模型 在写布局代码，最后是其他样式；

补充说明：
a标签跳转原理：
只有URL地址才能完成超链接
a标签中 href 属性；可以改变 URL 地址，通过修改 URL 地址完成超链接；