css3动画（2D）

Bertha 。 2021-11-02 07:06 478阅读 0赞

### 响应式布局 ###

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

\#\#\#媒体查询  
1.语法结构  
~~css  
media 媒体设备 and (条件)\{  
选择器\{  
属性：值；  
\}  
\}  
\-@media 表示媒体查询  
\-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 地址完成超链接；