transform2D变换

平移? ? ? ? transform

transform:?translate(xpx,ypx)

? ? ? ? ? ? ? ? 第一个参数水平平移量右为正方向

? ? ? ? ? ? ? ? 第二个参数竖直平移量下为正方向

旋转????????rotate

transform:rotate(xdeg)

????????????????参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180° */

? ? ? ? ? ? ?????沿轴进行顺时针旋转为正方向，0°代表竖直向上

缩放????????scale

transform: scale(x)? ? ? ? ? ??

? ? ? ? ? ? ? ? 参数：比率 1 为原本大小

????????????????scale 写负数代表反向

倾斜???????? skew

transform: skew(xdeg)

? ? ? ? ? ? ? ? 参数为角度

?transition过渡动画

概念：transition是过渡的意思，将会使元素从一个状态用动画形式过渡到另一个状态

属性：

transition-property:?指定css属性能够产生过度动画
transition-duration?动画播放的时长
transition-timing-function?动画播放的速度曲线，属性值有linear：匀速直线运动、ease-in: 慢进、ease-out: 慢出
transition-delay??动画播放延迟

简写属性：transition: property duration timing-function delay

animation动画

注意：animation动画必须包含名称和时长两个属性才会进行播放

属性：

animation-name????????动画名称
animation-duration? ? ??动画播放时长
animation-timing-function? ? ? ?动画播放的速度曲线，属性值和transition一样
animation-iteration-count? ? ?动画的迭代次数，属性值可以是任意次数，infinite 表示无限次
animation-direction? ? ??动画播放方向，属性值normal: 顺向播放、reverse: 反向播放、alternate: 来回播放、alternate-reverse: 反向来回播放
animation-fill-mode: both? ? ?动画填充模式（动画播放结束后所保留的状态），属性值forwards: 保留结束帧的状态、backwards: 保留起始帧的状态、both: 保留初始和结束时的状态

animation动画必须设置一个关键帧，关键字设置了动画执行的每一个步骤，每一个画面，如下

@keyframes 动画名{

? ? ? ? ? ? from {

? ? ? ? ? ? ? ? css样式属性

? ? ? ? ? ? }

? ? ? ? ? ? to {

? ? ? ? ? ? ? ? css样式属性

? ? ? ? ? ? }

? ? ? ? 注意：除了使用from 和 to ?还可以将整个动画流程看成是100%进度

3D变换

?概念：使元素看上去在三维空间中发生变换（平移旋转缩放倾斜）

要使用3d变换需要依序执行以下步骤：

1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;

2. 在父元素上设置透视距离：perspective: 100px;

3. 给场景添加演员，给场景元素添加子元素

?4. 在子元素上使用3d变换

响应式布局?

?响应式是什么？????????当某个事情发生后，立即做出反应就叫响应式
什么是页面的响应式？????????页面的元素样式会根据页面的宽度做出变化
为什么要使用页面响应式？? ? ? ?为了让同一个页面能够适配不同的设备
如何实现响应式？????????使用媒体查询，来实现响应式布局
媒体查询的作用：当媒体查询条件成立时，将应用花括号中代码块的样式

语法：?@media media-type and (condition1) and (condition2）......

媒体类型 media-type：

? ? ? ? ? ? 备选项

? ? ? ? ? ? all: 所有设备

? ? ? ? ? ? print：打印机的预览模式

? ? ? ? ? ? screen：显示屏

? ? ? ? ? ? speech：语音合成器

jQuery?

概念：使用jquery $() 函数查询出来的返回值就是一个jquery 对象

获取jquery对象的方法有两种：

????????1. 使用 css 选择器

? ? ? ? 2.?使用 dom 对象

eq（）和get（）的区别：

? ? ? ? eq（）读取对应索引位置的jquery对象。

????????get（）读取对应索引位置的dom对象，使用 [] 方括号的方式去获取索引对应的 dom 对象

创建并插入元素

 // 创建一个节点，该节点就是一个jquery对象
    let $box = $(`<div class="box">new</div>`)

    // 某个元素追加一个子节点
    // $(document.body).append($box)

    // 追加一个子节点到另一个元素中
    // $box.appendTo($(document.body))

    // 某个元素追加一个节点到头部
    // $(document.body).prepend($box)

    // 追加一个子节点到另一个元素的头部
    // $box.prependTo($(document.body))

    let $box2 = $('.box').eq(1)

    // 某个元素的前面追加一个元素
    // $box2.before($box)

    // 某个元素被添加到另一个元素的前面
    // $box.insertBefore($box2)

    // 某个元素的后面添加一个元素
    // $box2.after($box)

    // 某个元素被添加到另一个元素的后面
    $box.insertAfter($box2)