<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
            transform: translate(-50px, -50px);
            transform: translateX(300px);
            transform: translateY(200px);
            transform: translateZ(50px);
        }
    </style>

②旋转

rotate 旋转?

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

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

? ? ? ? ? ? ?负数的含义其实就是 360 - 对应度数?

? ? ? ? ? ? ?默认旋转函数rotate 是沿着z轴进行旋转?

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: relative;
            top: 200px;
            left: 200px;
            transform: rotate(30deg);
            transform: rotate(-30deg);
            transform: rotateY(0deg);
        }
    </style>

③缩放

scale 缩放

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

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

 <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: relative;
            top: 200px;
            left: 200px;
            transform: scale(1);
            transform: scaleX(0.5);
            transform: scaleY(2);
            transform: scale(2, 0.5);
        }

        img {
            transform: scale(-1);
            transform: scaleX(-1);
        }
    </style>

④倾斜

skew 倾斜

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: relative;
            top: 200px;
            left: 200px;
            transform: skew(30deg);
            transform: skew(0deg, 30deg);
            transform: skewX(30deg);
            transform: skewY(30deg);
        }
    </style>

⑤给transform同时赋值

 <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            transform: translateX(100px) rotate(45deg) scale(0.5);
        }
    </style>

⑥变化的原点

设置transform的原点?

? ? ? ? ? ? ?原点的位置会影响旋转的圆心，缩放的位置?

? ? ? ? ? ? 待选值: top bottom left right center 还可以填入像素值?

第一个参数代表水平偏移量第二个参数代表竖直偏移量?

? ? ? ? ? ? ?transform-origin: right center;?

? ? ? ? ? ? ?transform-origin: center bottom;?

? ? ? ? ? ? 当值为像素值的时候，像素值的参考位置是元素的左上角?

? ? ? ? ? ? ?transform-origin: 20px 70px;?

<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 200px;
            left: 200px;
            transform-origin: center;
            /* transform-origin: right center; */
            /* transform-origin: center bottom; */
           /* transform-origin: 20px 70px; */
            transform: rotate(0deg);
            transform: scale(0.1);

        }
 </style>

2.过渡动画

①transition过渡动画

定义初始状态

transform: translateX(0px);

播放过度动画至少包含 transition-property transition-duration

指定css属性能够产生过度动画

?transition-property: left, transform;

transition-property 还有两个待选项

? ? ? ? ? ? ? ? none: 无

? ? ? ? ? ? ? ? all: 所有属性都能播放过渡动画

transition-property: all;

动画播放的时长

transition-duration: 2s;

动画播放的速度曲线?

? ? ? ? ? ? ?待选项

? ? ? ? ? ? ? ? linear: 匀速直线运动

? ? ? ? ? ? ? ? ease-in: 慢进

? ? ? ? ? ? ? ? ease-out: 慢出

? ? ? ? ? ? ? ? ease-in-out: 慢进慢出

? ? ? ? ? ? ? ? cubic-bezier: 曲线函数

transition-timing-function: linear;

动画播放延迟

?transition-delay: 3s;

合成属性

? ? ? ? ? ? ? ? 语法:

? ? ? ? ? ? ? ? transition: property duration timing-function delay;

②通过class来控制过渡动画

初始状态

transform: translateX(0);

? ? ? ? ? ? opacity: 1;

通常来说使用 active 类名来代表播放动画的状态?

? ? ? ? .box.active 的意思是: 选择既包含.box又包含.active的元素

?.box.active {

? ? ? ? ? ? /* 激活状态 */

? ? ? ? ? ? transform: translateX(300px);

? ? ? ? ? ? opacity: 0;

? ? ? ? }

添加 active 类名用来控制动画的播放

? ? ? ? ?box.className = 'box active'

? ? ? ? box.classList.add('active')

3.animation动画

动画属性如下?

? ? ? ? ? ??动画animation必须包含名称和时长两个属性才会进行播放 */

? ? ? ? ? ? animation一下四个属性可以和 tansition一块儿进行记忆

/* 动画名称 */

? ? ? ? ? ? animation-name: move;

? ? ? ? ? ? /* 动画播放时长 */

? ? ? ? ? ? animation-duration: 3s;

? ? ? ? ? ? /* 动画播放的速度曲线 */

? ? ? ? ? ? animation-timing-function: linear;

? ? ? ? ? ? /* 动画延迟 */

? ? ? ? ? ? /* animation-delay: 3s; */

?以下属性为 animation 独有的属性?

?/* 动画的迭代次数

? ? ? ? ? ? ? ? infinite 无限次

? ? ? ? ? ? */

? ? ? ? ? ? animation-iteration-count: 1;

? ? ? ? ? ? /* 动画播放方向

? ? ? ? ? ? ? ? 待选项:

? ? ? ? ? ? ? ? normal: 顺向播放

? ? ? ? ? ? ? ? reverse: 反向播放

? ? ? ? ? ? ? ? alternate: 来回播放

? ? ? ? ? ? ? ? alternate-reverse: 反向来回播放

? ? ? ? ? ? */

? ? ? ? ? ? animation-direction: normal;

? ? ? ? ? ? /* 动画填充模式（动画播放结束后所保留的状态）

? ? ? ? ? ? ? ? forwards: 保留结束帧的状态

? ? ? ? ? ? ? ? backwards: 保留起始帧的状态

? ? ? ? ? ? ? ? both: 保留初始和结束时的状态

? ? ? ? ? ? */

? ? ? ? ? ? animation-fill-mode: both;

可以定义复合属性，取代上面的所有属性?

? ? ? ? ? ? ?赋值顺序，可以参考如下顺序

duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */

? ? ? ? ? ? /* duration | timing-function | delay | name */

? ? ? ? ? ? /* duration | name */

? ? ? ? ? ? /* animation: 2s move;

? ? ? ? ? ? animation: 2s linear 3s move

例子：

<style>
.box{
 animation: move 3s linear 2s forwards;

}
/* 动画帧序列 */
        @keyframes move {

            /* 起始帧 */
            from {
                /* 每一帧中描述该元素的状态 */
                transform: translateX(0px);
                opacity: 0;
            }

            /* 可以用百分比来代表动画的中间状态 */
            50% {
                transform: translateX(600px);
                opacity: 1;
            }

            /* 结束帧 */
            to {
                transform: translateX(300px);
            }
        }

</style>

4.动画的暂停和播放

animationPlayState 动画播放状态

? ? ? ? ?paused 暂停

? ? ? ? ?running 播放

5、3D变换

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

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

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

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

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

6、属性选择器补充

匹配属性值包含指定内容的元素

?input[name*=e] {

? ? ? ? ? ? border: 3px solid red;

? ? ? ? }

匹配属性值以指定内容开头的元素

input[name^=s] {

? ? ? ? ? ? font-size: 24px;

? ? ? ? }

匹配属性值以指定内容结束的元素

input[name$=e] {

? ? ? ? ? ? background-color: greenyellow;

? ? ? ? }

?匹配属性值包含 dep- 开头的元素

input[name|=dep] {

? ? ? ? ? ? border: 3px solid blue;

? ? ? ? }

7.伪类选择器的补充

表单元素被禁用时的样式

input:disabled {

? ? ? ? ? ? border: 3px solid red;

? ? ? ? }

disabled仅限于表单元素使用

.box:disabled {

? ? ? ? ? ? border: 3px solid black;

? ? ? ? }

checked代表被勾选的元素

?input[name=sex]:checked {

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? }

? ? ? ?选中元素中的第一个字符?

.hw::first-letter {

? ? ? ? ? ? color: red;

? ? ? ? }

元素中的第一行内容

?.p1::first-line {

? ? ? ? ? ? color: green;

? ? ? ? }

选中的内容

.p2::selection {

? ? ? ? ? ? background-color: gold;

? ? ? ? }

8.渐变色

背景的渐变色实际上是设置的 background-image 而不是 background-color?

线性渐变：

? ? ? ? ? ? ? ?语法: linear-gradient(direction, color1, color2, color3 ... )

? ? ? ? ? ? ? ? direction: 渐变色的朝向以 to 开头, 或者可以添加角度值; 默认值为 to top

? ? ? ? ? ? ? ? color1 color2 ...: 渐变的颜色序列

?background-image: linear-gradient(30deg, #f00, #0f0, #00f);

颜色值后可以添加像素距离，该像素值代表着该颜色所处的位置，该位置颜色将到下一个位置的颜色之间进行渐变

?background-image: linear-gradient(to right, #f00, #f00 50px, #0f0 50px, #0f0 100px, #00f 200px);

?重复线性渐变

background-image: repeating-linear-gradient(to right, #f00, #f00 50px, #00f 50px, #00f 100px);

径向渐变

background-image: radial-gradient(#f00, orange, #0f0, #ff0, #f0f);

? ? ? ? ? ? background-image: radial-gradient(#f00, #f00 50px, #00f 50px, #00f 100px, #0f0 100px, #0f0 200px);

重复径向渐变

background-image: repeating-radial-gradient(#f00, #f00 50px, #ff0 50px, #ff0 100px);

9.分栏布局

设置文本列数

column-count: 3;

设置列宽度

column-width: 150px;

分栏边框，属性值和边框的属性值相同

column-rule: 5px double red;

两列文本中间的间距

column-gap: 100px;

10.响应式布局

响应式是什么？

当某个事情发生后，立即做出反应就叫响应式

? ? ? ? ? ? 此处我们讨论的是页面的响应式

什么是页面的响应式？

? ? ? ? ? ? 页面的元素样式会根据页面的宽度做出变化

为什么要使用页面响应式

? ? ? ? ? ? 为了让同一个页面能够适配不同的设备

?如何实现响应式？?

? ? ? ? 使用媒体查询，来实现响应式布局?

? ? ? ? 媒体查询的作用：当媒体查询条件成立时，将应用花括号中代码块的样式

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

? ? ? ? 媒体类型 media-type：

? ? ? ? ? ? 备选项

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

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

? ? ? ? ? ? screen：显示屏

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

? ? ? ? ?min-width: 屏幕最小宽度?

? ? ? ? ?max-width: 屏幕最大宽度?

 @media screen and (min-width: 600px) and (max-width: 900px) {
            .box {
                background-color: orange !important;
            }
        }

        @media screen and (min-width: 900px) {
            .sidebar {
                display: block !important;
            }
        }

        @media screen and (max-width: 900px) {
            .sidebar-mini {
                display: block !important;
            }
        }

二、jquery

1.jquery使用的方法：

① 查询并存储元素

②?操作元素，包括修改元素样式，绑定事件等

使用 $() 函数获取一个 jQuery 对象

? ?jquery 对象的变量名一般以 $ 美元符开头

let $box = $('.box')

jquery 对象看上去像一个数组其中数组成员就是 dom 对象

给元素添加样式

? ? $box.css('height', '100px')

? ? $box.css('background-color', '#f00')

jquery对象的函数总返回自己

?所以可以进行链式调用

2.创建jquery对象

什么是jquery 对象

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

$box 就是一个jquery 对象

? ? ?let $box = $('.box')

获取jquery对象的方法有两种

? ??①使用 css 选择器

?let $li = $('ul>li')

②使用 dom 对象

先查询一个dom对象

?let box = document.querySelector('.box')

使用dom对象获取一个jquery对象

let $box = $(box)

3.eq和get的用法

eq 读取对应索引位置的jquery对象

let $li = $lis.eq(1)

get 读取对应索引位置的dom对象?

? ?let li = $lis.get(2)

? ? li.style.color = '#f00'

使用 [] 方括号的方式去获取索引对应的 dom 对象

? ?其结果等价于 get 函数获取的结果

?let li = $lis[2]

? ? li.style.color = '#f00'

4.创建并插入元素

创建一个节点，该节点就是一个jquery对象

let $box = $(`<div class="box">new</div>`)

某个元素追加一个子节点

$(document.body).append($box)

追加一个子节点到另一个元素中

?$box.appendTo($(document.body))

某个元素追加一个节点到头部

$(document.body).prepend($box)

追加一个子节点到另一个元素的头部

$box.prependTo($(document.body))

某个元素的前面追加一个元素

$box2.before($box)

某个元素被添加到另一个元素的前面

?$box.insertBefore($box2)

?某个元素的后面添加一个元素

$box2.after($box)

某个元素被添加到另一个元素的后面

$box.insertAfter($box2)

5.设置样式

读取样式

let width = $box.css('width')

? ? console.log(width);

?读取多个样式

let r = $box.css(['width', 'color', 'font-size'])

? ? console.log(r);

赋值样式

$box.css('background-color', '#f00')

?通过函数来赋值样式

?index 遍历的数组成员的索引

? value 对应索引元素的样式值

$box.css('background-color', (index, value) => {

? ? ? ? console.log(index, value);

?返回一个参数就可以赋值css属性

if (index === 0) {

? ? ? ? ? ? return 'pink'

? ? ? ? } else {

? ? ? ? ? ? return 'gold'

? ? ? ? }

? ? })

6.设置类

添加类

?$box.addClass('active')

判断是否存在某个类名

$box.hasClass('active')

删除类

?$box.removeClass('active')

7.设置属性

?读取属性

let clazz = $box.attr('class')

? ? console.log(clazz);

赋值属性

?$box.attr('my-data', 'hello world')

?删除属性

$box.removeAttr('class')

8.设置标签体

相当于dom对象的innerText

$p.text('<span style="color: red">hello</span> world')

相当于dom对象的innerHTML

?$p.html('<span style="color: red">hello</span> world')

9.绑定事件

和dom对象绑定事件进行类比

? ?dom 对象有两种绑定事件的方法

? ? ①使用事件属性例如: onclick onmousemove

$btn.click(ev => {

? ? ? ? console.log('click');

? ? ? ? // ev 是jquery封装的事件对象

? ? ? ? console.log(ev);

? ? })

② 使用事件监听器

?$btn[0].addEventListener('click', ev=>{})

const handler = ev => {

? ? ? ? console.log(ev);

? ? ? ? console.log(1);

? ? }

绑定事件

? $btn.on('click', handler)

? ? $btn.on('click', ev => {

? ? ? ? console.log(ev);

? ? ? ? console.log(2);

? ? })

绑定一次性事件

$btn.one('click', ev => {

? ? ? ? console.log(ev);

? ? ? ? console.log('one');

? ? })

解绑指定事件处理程序

? ? $btn.off('click', handler)

? ??解绑所有事件处理程序

$btn.off('click')

10.元素包裹

?wrap wrapAll 函数作用是将指定元素用一段html内容包裹起来

每一个元素都使用 div 来进行包裹

? ? $('li').wrap('<div class="fs"></div>')

所有的 li 元素用一个 div 进行包裹

?$('li').wrapAll('<div class="fs"></div>')

11.读取和设置元素大小和位置

读取元素位置

?position 查询元素相对于父元素的位置不能赋值只能读值

?console.log($box.position());

offset 查询元素全局坐标

?console.log($box.offset());

offset 可以赋值

$box.offset({ top: 200, left: 100 })

所有查询元素大小的函数均可赋值

? ? ?查询元素的内容宽高

console.log($box.width(300));

? ? console.log($box.height());

innerWidth 代表 width + padding

?console.log($box.innerWidth());

outerWidth 代表 width + padding + border

console.log($box.outerWidth());

12.其他API

index() 查询某个节点在集合中的索引

let index = $('.box').index($('.box:nth-child(3)'))

? ? console.log(index);

find() 查询某个节点的后代节点

?let $span = $('.box-list').find('.box>span')

? ? console.log($span);

js api 的查询方法

let boxList = document.querySelector('.box-list')

查询boxList的子节点

?console.log(boxList.querySelector('.box>span'));

closest 查询最近的父节点

?console.log($span.closest('.box-list'));

三、canvas画布

1.canvas的基础用法

使用canvas的步骤

??①?创建canvas标签

??② 给canvas标签设置 width height 属性

canvas width="400" height="300"></canvas>

? ③ 通过js 获取canvas标签

? ④. 通过canvas标签获取context画布上下文（画布对象）

const ctx = canvas.getContext('2d')

? ?⑤ 通过context绘制画布

ctx.fillRect(100, 50, 100, 100)

2.绘制矩形

?改颜色

? ? ctx.fillStyle = '#f00'

? ? 绘制实心矩形(rectangle)

? ? ?ctx.fillRect(x, y, w, h)

? ? ?x: 水平坐标

? ? ?y: 竖直坐标

? ? /坐标原点在canvas左上角

? ? ?w: 宽度

? ??h: 高度

? ? ctx.fillRect(50, 100, 150, 50)

? ? 镂空矩形

? ??参数和实心矩形相同

? ? ctx.strokeRect(300, 100, 200, 100)

? 清空矩形, 用于清空画布

? ? ctx.clearRect(0, 0, 800, 600)

3.绘制文本

修改字体大小和字体库

? ? ctx.font = '32px 华文琥珀'

? ? ctx.fillStyle = '#f00'

? ?绘制实心文字

? ?语法：ctx.fillText(text, x, y, max-width)

? ? ?text: 要渲染的文本

? ? x,y: 文本渲染的坐标位置

? ? max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度

? ? ?ctx.fillText('祖国万岁!!', 200, 100, 100)

? ? ctx.fillText('祖国万岁!!', 200, 100)

? ? ctx.strokeStyle = '#0f0'

? ??镂空文字

? ? 参数和实心文本相同

? ? ctx.strokeText('祖国万岁!!', 200, 300)

4.画线

设置颜色和线宽

? ? ctx.strokeStyle = '#ff0'

? ? ctx.lineWidth = 15

?画线分两个步骤:

? ? ①描点（设置路径）

? ? ②画线（将所描的点连接起来）

? ?步骤一

? ? ?使用 beginPath 开启路径

? ? ctx.beginPath()

? ?移动笔头但不会记录路径上的线条

? ? ctx.moveTo(400, 100)

? ? 用线绘制到下一个点

? ? ctx.lineTo(200, 200)

? ? ctx.lineTo(600, 200)

? ? ctx.lineTo(400, 100)

?将路径封闭

? ? ctx.closePath()

? ?注意：beginPath在画新的路径的时候必须调用，closePath选择性调用

? ? 步骤二

? ? 为了显示图形需要调用以下函数

? ? ?将路径所包围的图形用纯色来填充

? ? ctx.fill()

? ? 将路径用镂空线条进行绘制

? ? ctx.stroke()

? ? ctx.strokeStyle = '#f00'

? ? ctx.beginPath()

? ? ctx.moveTo(400, 400)

? ? ctx.lineTo(500, 400)

? ? 角度转弧度的公式: rad = (PI / 180) * deg

? ? ?弧线

? ? ctx.arc(x, y, r, start, end)

? ? x: 圆心横坐标

? ? ?y: 圆心纵坐标

? ? r: 圆半径

? ? start: 起始弧度 0度时的方向为水平向右顺时针为正方向

? ? end: 结束弧度

? ? ctx.arc(400, 400, 100, 0, Math.PI / 180 * 30)

? ? ctx.closePath()

? ? ctx.fill()

? ??ctx.stroke()

5.fillStyle和strokeStyle

??fillStyle 可以修改所有使用fill的函数所填充的颜色

? ? ctx.fillStyle = '#f00'

? ? ctx.fillRect(0, 0, 50, 50)

? ? ctx.beginPath()

? ? ctx.arc(250, 250, 200, (Math.PI / 180) * (-90), (Math.PI / 180) * (90))

? ? ctx.fill()

? ? strokeStyle 可以修改所有stroke函数的描边颜色

? ? ctx.strokeStyle = 'violet'

? ? ctx.lineWidth = 10

? ? ctx.strokeRect(50, 0, 50, 50)

? ? ctx.beginPath()

? ? ctx.arc(250, 250, 200, (Math.PI / 180) * (90), (Math.PI / 180) * (270))

? ? ctx.stroke()

6.绘制图片

语法:

? ? ctx.drawImage(image, dx, dy);

? ? ctx.drawImage(image, dx, dy, dWidth, dHeight);

? ? ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

? ? image: img 标签的 dom 对象

? ? ?dx dy: 图片在canvas中的坐标

? ? dWidth dHeight: 图片在canvas中的宽高

? ? sx, sy: 参考图片源，截图的坐标

? ? ?sWidth, sHeight: 截图的宽高

? ? const img = document.querySelector('img')

? ? const canvas = document.querySelector('canvas')

? ? const ctx = canvas.getContext('2d')

img.addEventListener('load', () => {

? ? // ? ? // 图片加载完成后再绘制图片

? ? // ? ? // ctx.drawImage(img, 100, 100)

? ? // ? ? // ctx.drawImage(img, 100, 100, 100, 100)

? ? // ? ? ctx.drawImage(img, 10, 100, 170, 170, 100, 100, 170, 170);

? ? // })

动态生成图片进行绘图

? ? let img = document.createElement('img')

? ? img.style.display = 'none'

? ? img.src = './img/heihei.png'

? ? img.addEventListener('load', ev => {

? ? ? ? // 绘图

? ? ? ? ctx.drawImage(img, 10, 100, 170, 170, 100, 100, 170, 170);

? ? ? ? // 删除图片节点

? ? ? ? img.remove()

? ? })

? ? // 插入图片到页面

? ? document.body.appendChild(img)