diff --git "a/\347\216\213\351\235\226\350\214\271/20241025--CSS\345\261\236\346\200\247\350\257\246\350\247\243--\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/\347\216\213\351\235\226\350\214\271/20241025--CSS\345\261\236\346\200\247\350\257\246\350\247\243--\345\212\250\347\224\273\350\257\246\350\247\243.md" index 085240fba1c78f258fe0e9025250f491c1952348..01063afae105470c905aee811b9b74edaadfb110 100644 --- "a/\347\216\213\351\235\226\350\214\271/20241025--CSS\345\261\236\346\200\247\350\257\246\350\247\243--\345\212\250\347\224\273\350\257\246\350\247\243.md" +++ "b/\347\216\213\351\235\226\350\214\271/20241025--CSS\345\261\236\346\200\247\350\257\246\350\247\243--\345\212\250\347\224\273\350\257\246\350\247\243.md" @@ -40,3 +40,640 @@ transition 包括以下属性： 如果设置 `transition-property: all`，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。效果如下： ![](http://img.smyhvae.com/20180208_1445.gif) + +### 常见的边框图片汇总 + +```html + +``` + + +## 2D 转换 + +**转换**是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。 + +转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。 + +在 CSS3 当中，通过 `transform` 转换来实现 2D 转换或者 3D 转换。 + +- 2D转换包括：缩放、移动、旋转。 + +### 1、缩放：`scale` + +格式： + +```javascript + transform: scale(x, y); + + transform: scale(2, 0.5); +``` + +参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 + +取值：大于1表示放大，小于1表示缩小。不能为百分比。 +### 2、位移：translate + +格式： + + +```javascript + transform: translate(水平位移, 垂直位移); + + transform: translate(-50%, -50%); +``` + +参数解释： + +- 参数为百分比，相对于自身移动。 + +- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。 + +### 3、旋转：rotate + +格式： + +```javascript + transform: rotate(角度); + + transform: rotate(45deg); +``` + +参数解释：正值 顺时针；负值：逆时针。 + +### 4、倾斜 + +## 3D 转换 + +### 1、旋转：rotateX、rotateY、rotateZ + +**3D坐标系（左手坐标系）** + +![](http://img.smyhvae.com/20180208_2010.png) + +如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。 + +浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。 + +**旋转的方向：（左手法则）** + +左手握住旋转轴，竖起拇指指向旋转轴的**正方向**，正向就是**其余手指卷曲的方向**。 + +从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。 + +**格式：** + +```javascript + transform: rotateX(360deg); //绕 X 轴旋转360度 + + transform: rotateY(360deg); //绕 Y 轴旋转360度 + + transform: rotateZ(360deg); //绕 Z 轴旋转360度 + +``` +**格式举例：** + +（1）rotateX 举例： + +```html + + + + + + + + +
+ +
+ + +``` + +效果： + +![](http://img.smyhvae.com/20180208_2025.gif) +（2）rotateY 举例： + +```html + + + + + + + + +
+ +
+ + +``` + +效果： + +![](http://img.smyhvae.com/20180208_2030.gif) + +（3）rotateZ 举例： + +```html + + + + + + + + +
+ +
+ + +``` + +效果： + +![](http://img.smyhvae.com/20180208_2035.gif) + +### 3、透视：perspective + +电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。 + +透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出 3d 效果，并不是正真的3d。 + +格式有两种写法： + +- 作为一个属性，设置给父元素，作用于所有3D转换的子元素 + +- 作为 transform 属性的一个值，做用于元素自身。 + +格式举例： + +```css +perspective: 500px; +``` + +### 4、3D呈现（transform-style） + +3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的**父元素**设置`transform-style: preserve-3d`来使其变成一个真正的3D图形。属性值可以如下： + +```css + transform-style: preserve-3d; /* 让 子盒子 位于三维空间里 */ + + transform-style: flat; /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */ + +``` +## 动画 + +动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。 + +### 1、定义动画的步骤 + +（1）通过@keyframes定义动画； + +（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； + +（3）在指定元素里，通过 `animation` 属性调用动画。 + +之前,我们在 js 中定义一个函数的时候，是先定义，再调用： + +```javascript + js 定义函数： + function fun(){ 函数体 } + + 调用： + fun(); +``` + +同样，我们在 CSS3 中**定义动画**的时候，也是**先定义，再调用**： + +```javascript + 定义动画： + @keyframes 动画名{ + from{ 初始状态 } + to{ 结束状态 } + } + + 调用： + animation: 动画名称 持续时间； +``` + +其中，animation属性的格式如下： + +```javascript + animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + + animation: move1 1s alternate linear 3; + + animation: move2 4s; +``` + +**定义动画的格式举例：** + +```html + + + + + + + + +
+ +
+ + +``` + +注意好好看代码中的注释。 + +效果如下： + +![](http://img.smyhvae.com/20180209_1001.gif) + +### 2、动画属性 +animation属性的格式如下： + +animation属性的格式如下： + +```javascript + animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + + animation: move1 1s alternate linear 3; + + animation: move2 4s; +``` +animation 是综合属性，拆分看看。 + +（1）动画名称： + +```javascript + animation-name: move; +``` + +（2）执行一次动画的持续时间： + +```javascript + animation-duration: 4s; +``` + +备注：上面两个属性，是必选项，且顺序固定。 + +（3）动画的执行次数： + +```javascript + animation-iteration-count: 1; //iteration的含义表示迭代 +``` + +属性值`infinite`表示无数次。 + +（3）动画的方向： + +```javascript + animation-direction: alternate; +``` + +属性值：normal 正常，alternate 反向。 + +（4）动画延迟执行： + + +```javascript + animation-delay: 1s; +``` + +（5）设置动画结束时，盒子的状态： + +```javascript + animation-fill-mode: forwards; +``` + +属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。 + +（6）运动曲线： + +``` + animation-timing-function: ease-in; +``` + +属性值可以是：linear ease-in-out steps()等。 + +注意，如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 `steps()`。 + +### steps()的效果 + +```javascript + animation: move2 4s steps(2); +``` + +效果如下： + +![](http://img.smyhvae.com/20180209_1020.gif) + +有了属性值 `steps()`，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。 + + +## 作业 +1. 小米 +```css + +``` + + +2.小火箭 +```css + +``` + + + +3. 遥遥领先 +```css + +``` + + +4. 纸牌 +```css + +``` diff --git "a/\347\216\213\351\235\226\350\214\271/20241025--CSS\345\261\236\346\200\247\350\257\246\350\247\243.md" "b/\347\216\213\351\235\226\350\214\271/20241025--CSS\345\261\236\346\200\247\350\257\246\350\247\243.md" index d07c32f288971401dc1a884c23568251f5080748..93591ed5fc6d89d4dc85a09dadeae5ffae26887c 100644 --- "a/\347\216\213\351\235\226\350\214\271/20241025--CSS\345\261\236\346\200\247\350\257\246\350\247\243.md" +++ "b/\347\216\213\351\235\226\350\214\271/20241025--CSS\345\261\236\346\200\247\350\257\246\350\247\243.md" @@ -301,197 +301,3 @@ box-sizing:content-box; ![](http://img.smyhvae.com/20180207_2051.png) -### 常见的边框图片汇总 - -```html - -``` - -## 作业 -1. 小米 -```css - -``` - - -2.小火箭 -```css - -``` - - - -3. 遥遥领先 -```css - -``` - - -4. 纸牌 -```css - -``` diff --git "a/\347\216\213\351\235\226\350\214\271/20241028--CSS\345\261\236\346\200\247--Flex\345\270\203\345\261\200\345\233\276\346\226\207\350\257\246\350\247\243.md" "b/\347\216\213\351\235\226\350\214\271/20241028--CSS\345\261\236\346\200\247--Flex\345\270\203\345\261\200\345\233\276\346\226\207\350\257\246\350\247\243.md" new file mode 100644 index 0000000000000000000000000000000000000000..13e0cb2f7fb982f9c2e5b04fea89bbd00c531988 --- /dev/null +++ "b/\347\216\213\351\235\226\350\214\271/20241028--CSS\345\261\236\346\200\247--Flex\345\270\203\345\261\200\345\233\276\346\226\207\350\257\246\350\247\243.md" @@ -0,0 +1,169 @@ +## 前言 +Css3中的flex属性，在布局方面做了非常大的改进，使得我们对**多个元素之间**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。 + +### flex初体验 +默认文档流中，在一个父容器里放置多个块级的子元素，那么这些子元素会默认从上往下排列。 + +但是在此基础上给父容器仅加上一个`displa:flex`属性，此时子元素会在**水平方向上，从左到右排列** + +### flex的布局优势 +1) flex布局的子元素不会脱落文档流 + +1) **flex是一种现代的布局方式，是W3C第一次提供真正用于布局的CSS规范。** + +唯一的缺点：不支持低版本的IE浏览器 + +### flex 概念：弹性盒子、子元素 + +- **弹性盒子**：指的是使用`display:flex`或`display:inline-flex`声明的**父容器**。 + +- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。 + +### 概念：主轴和侧轴 +- 主轴：flex容器的主轴，默认是水平方向，从左向右。 + +- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。 + +PS：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向，我们在后面会讲到。 + +## 弹性盒子 + +### 声明定义 + +使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。 + +备注：一般是用 `display:flex`这个属性。`display:inline-flex`用得较少。 + +### flex-direction 属性 + +`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值可以是： + +| 属性值 | 描述 | +|:-------------|:-------------| +| row | 从左到右水平排列子元素（默认值） | +|column|从上到下垂直排列子元素| +| row-reverse |从右向左排列子元素 | +|column-reverse|从下到上垂直排列子元素| + +备注：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。 + +### align-items 属性 + +`align-items`：设置子元素在**侧轴上的对齐方式**。属性值可以是： + - `flex-start` 从侧轴开始的方向对齐 + - `flex-end` 从侧轴结束的方向对齐 + - `baseline` 基线 默认同flex-start + - `center` 中间对齐 + - `stretch` 拉伸 + + +## 作业 + +1.白熊 +```css + +``` + +![](./杂七杂八的东西/白熊.gif) + + +2.大鱼小鱼 +```css + +``` + +![](./杂七杂八的东西/大鱼小鱼.gif) \ No newline at end of file diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\244\247\351\261\274\345\260\217\351\261\274.gif" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\244\247\351\261\274\345\260\217\351\261\274.gif" new file mode 100644 index 0000000000000000000000000000000000000000..6f4d7b84003f2f779f7856b61b19e1532e77f5c7 Binary files /dev/null and "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\244\247\351\261\274\345\260\217\351\261\274.gif" differ diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\260\217\351\261\274.png" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\260\217\351\261\274.png" new file mode 100644 index 0000000000000000000000000000000000000000..d60ff6ecde05412936fd712b7588684c3faf79a2 Binary files /dev/null and "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\345\260\217\351\261\274.png" differ diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\346\215\225\351\261\274\346\270\270\346\210\217\345\212\250\347\224\273.html" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\346\215\225\351\261\274\346\270\270\346\210\217\345\212\250\347\224\273.html" new file mode 100644 index 0000000000000000000000000000000000000000..633d2d2dfe0f0c8d0dfb7026bf6629ac3c09489b --- /dev/null +++ "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\346\215\225\351\261\274\346\270\270\346\210\217\345\212\250\347\224\273.html" @@ -0,0 +1,10 @@ + + + + + Document + + + + + \ No newline at end of file diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\346\237\220\345\244\251\351\234\200\350\246\201\347\232\204\347\254\224\350\256\260.md" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\346\237\220\345\244\251\351\234\200\350\246\201\347\232\204\347\254\224\350\256\260.md" deleted file mode 100644 index 2cb8bff0c7b985e5b05338157736757932fe438c..0000000000000000000000000000000000000000 --- "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\346\237\220\345\244\251\351\234\200\350\246\201\347\232\204\347\254\224\350\256\260.md" +++ /dev/null @@ -1,454 +0,0 @@ -## 2D 转换 - -**转换**是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。 - -转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。 - -在 CSS3 当中，通过 `transform` 转换来实现 2D 转换或者 3D 转换。 - -- 2D转换包括：缩放、移动、旋转。 - -我们依次来讲解。 - -### 1、缩放：`scale` - -格式： - -```javascript - transform: scale(x, y); - - transform: scale(2, 0.5); -``` - -参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 - -取值：大于1表示放大，小于1表示缩小。不能为百分比。 -### 2、位移：translate - -格式： - - -```javascript - transform: translate(水平位移, 垂直位移); - - transform: translate(-50%, -50%); -``` - -参数解释： - -- 参数为百分比，相对于自身移动。 - -- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。 - -### 3、旋转：rotate - -格式： - -```javascript - transform: rotate(角度); - - transform: rotate(45deg); -``` - -参数解释：正值 顺时针；负值：逆时针。 - -### 4、倾斜 - -暂略。 - -## 3D 转换 - -### 1、旋转：rotateX、rotateY、rotateZ - -**3D坐标系（左手坐标系）** - -![](http://img.smyhvae.com/20180208_2010.png) - -如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。 - -浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。 - -**旋转的方向：（左手法则）** - -左手握住旋转轴，竖起拇指指向旋转轴的**正方向**，正向就是**其余手指卷曲的方向**。 - -从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。 - -**格式：** - -```javascript - transform: rotateX(360deg); //绕 X 轴旋转360度 - - transform: rotateY(360deg); //绕 Y 轴旋转360度 - - transform: rotateZ(360deg); //绕 Z 轴旋转360度 - -``` -**格式举例：** - -（1）rotateX 举例： - -```html - - - - - - - - -
- -
- - -``` - -效果： - -![](http://img.smyhvae.com/20180208_2025.gif) - -上方代码中，我们最好加个透视的属性，方能看到3D的效果；没有这个属性的话，图片旋转的时候，像是压瘪了一样。 - -而且，透视的是要加给图片的父元素 div，方能生效。我们在后面会讲解透视属性。 - -（2）rotateY 举例： - -```html - - - - - - - - -
- -
- - -``` - -效果： - -![](http://img.smyhvae.com/20180208_2030.gif) - -（3）rotateZ 举例： - -```html - - - - - - - - -
- -
- - -``` - -效果： - -![](http://img.smyhvae.com/20180208_2035.gif) - -### 3、透视：perspective - -电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。 - -透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出 3d 效果，并不是正真的3d。 - -格式有两种写法： - -- 作为一个属性，设置给父元素，作用于所有3D转换的子元素 - -- 作为 transform 属性的一个值，做用于元素自身。 - -格式举例： - -```css -perspective: 500px; -``` - -### 4、3D呈现（transform-style） - -3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的**父元素**设置`transform-style: preserve-3d`来使其变成一个真正的3D图形。属性值可以如下： - -```css - transform-style: preserve-3d; /* 让 子盒子 位于三维空间里 */ - - transform-style: flat; /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */ - -``` -## 动画 - -动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。 - -### 1、定义动画的步骤 - -（1）通过@keyframes定义动画； - -（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； - -（3）在指定元素里，通过 `animation` 属性调用动画。 - -之前,我们在 js 中定义一个函数的时候，是先定义，再调用： - -```javascript - js 定义函数： - function fun(){ 函数体 } - - 调用： - fun(); -``` - -同样，我们在 CSS3 中**定义动画**的时候，也是**先定义，再调用**： - -```javascript - 定义动画： - @keyframes 动画名{ - from{ 初始状态 } - to{ 结束状态 } - } - - 调用： - animation: 动画名称 持续时间； -``` - -其中，animation属性的格式如下： - -```javascript - animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) - - animation: move1 1s alternate linear 3; - - animation: move2 4s; -``` - -**定义动画的格式举例：** - -```html - - - - - - - - -
- -
- - -``` - -注意好好看代码中的注释。 - -效果如下： - -![](http://img.smyhvae.com/20180209_1001.gif) - -### 2、动画属性 - -我们刚刚在调用动画时，animation属性的格式如下： - -animation属性的格式如下： - -```javascript - animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) - - animation: move1 1s alternate linear 3; - - animation: move2 4s; -``` - - -可以看出，这里的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。 - -（1）动画名称： - -```javascript - animation-name: move; -``` - -（2）执行一次动画的持续时间： - -```javascript - animation-duration: 4s; -``` - -备注：上面两个属性，是必选项，且顺序固定。 - -（3）动画的执行次数： - -```javascript - animation-iteration-count: 1; //iteration的含义表示迭代 -``` - -属性值`infinite`表示无数次。 - -（3）动画的方向： - -```javascript - animation-direction: alternate; -``` - -属性值：normal 正常，alternate 反向。 - -（4）动画延迟执行： - - -```javascript - animation-delay: 1s; -``` - -（5）设置动画结束时，盒子的状态： - -```javascript - animation-fill-mode: forwards; -``` - -属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。 - -（6）运动曲线： - -``` - animation-timing-function: ease-in; -``` - -属性值可以是：linear ease-in-out steps()等。 - -注意，如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 `steps()`。 - -### steps()的效果 - -我们还是拿上面的例子来举例，如果在调用动画时，我们写成： - - -```javascript - animation: move2 4s steps(2); -``` - -效果如下： - -![](http://img.smyhvae.com/20180209_1020.gif) - -有了属性值 `steps()`，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。 \ No newline at end of file diff --git "a/\347\216\213\351\235\226\350\214\271/\346\265\217\350\247\210\345\231\250\347\232\204\346\270\262\346\237\223\345\274\225\346\223\216\345\222\214js\345\274\225\346\223\216.md" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\346\265\217\350\247\210\345\231\250\347\232\204\346\270\262\346\237\223\345\274\225\346\223\216\345\222\214js\345\274\225\346\223\216.md" similarity index 100% rename from "\347\216\213\351\235\226\350\214\271/\346\265\217\350\247\210\345\231\250\347\232\204\346\270\262\346\237\223\345\274\225\346\223\216\345\222\214js\345\274\225\346\223\216.md" rename to "\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\346\265\217\350\247\210\345\231\250\347\232\204\346\270\262\346\237\223\345\274\225\346\223\216\345\222\214js\345\274\225\346\223\216.md" diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\347\231\275\347\206\212.gif" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\347\231\275\347\206\212.gif" new file mode 100644 index 0000000000000000000000000000000000000000..58e2e186d6a38dc5a4fc0da9ca15ca237ff42995 Binary files /dev/null and "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\347\231\275\347\206\212.gif" differ diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\347\231\275\347\206\212.png" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\347\231\275\347\206\212.png" new file mode 100644 index 0000000000000000000000000000000000000000..5100a19f692cc06c4cdc5007aa3248a155d807c2 Binary files /dev/null and "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\347\231\275\347\206\212.png" differ diff --git "a/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\351\262\250\351\261\274.png" "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\351\262\250\351\261\274.png" new file mode 100644 index 0000000000000000000000000000000000000000..667e7fd5bd158f95ebfbce25fc5a866b3ad31704 Binary files /dev/null and "b/\347\216\213\351\235\226\350\214\271/\346\235\202\344\270\203\346\235\202\345\205\253\347\232\204\344\270\234\350\245\277/\351\262\250\351\261\274.png" differ