diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/11.html" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/11.html" new file mode 100644 index 0000000000000000000000000000000000000000..bd2263cb988d30e63b9d3ca1fe1319edae991a5c --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/11.html" @@ -0,0 +1,228 @@ + + + + + + + Document + + + + + +
+

+
+ +
+

+

+
+ +
+

+

+

+
+ +
+
+

+

+
+
+

+

+
+
+ +
+
+

+

+
+
+

+
+
+

+

+
+
+ +
+
+

+

+
+
+

+

+
+
+

+

+
+
+ +
+
+

+

+

+
+
+

+
+
+

+

+

+
+
+ +
+
+

+

+

+
+
+

+

+
+
+

+

+

+
+
+ +
+
+

+

+

+
+
+

+

+

+
+
+

+

+

+
+
+ + + \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241024-\345\212\250\347\224\273.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241024-\345\212\250\347\224\273.md" new file mode 100644 index 0000000000000000000000000000000000000000..52650e474b786e21d82e5e274296cb87fee966c8 --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241024-\345\212\250\347\224\273.md" @@ -0,0 +1,269 @@ +1. 周深 +```html + + + + + + + Document + + + + +
+
+ + 《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落 +
+
+ + 《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落 +
+
+ + 《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落 +
+
+ + 《大鱼》
演唱：周深
海浪无声将夜幕深深淹没
漫过天空尽头的角落 +
+
+ + + +``` + +2. 两条鱼 +```html + + + + + + + Document + + + + +
+
+
+
+
+
+ + + +``` +3. 白熊 +```html + + + + + + + Document + + + + +
+
+
+ + + +``` \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241024-\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241024-\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.md" new file mode 100644 index 0000000000000000000000000000000000000000..28d32d9809e2438123221cb915ca4d1afca3ee64 --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241024-\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.md" @@ -0,0 +1,355 @@ +1. +```html + + + + + + + Document + + + + +
+
+ +
+
+ +
+ + + +``` +2. +```html + + + + + + + Document + + + + +
遥遥领先
+ + + +``` + +3. +```html + + + + + + + + + + + + + + +``` + +4. +```html + + + + + + + Document + + + + +
+ + + + + + + + + + + + + +
+ + + + +``` +5. +```html + + + + + + + + + + +
+
+
+
+ + + +``` \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241028-flex\345\270\203\345\261\200.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241028-flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..0cf226f93d3350370259d2415a33ae5e4b93dffe --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/20241028-flex\345\270\203\345\261\200.md" @@ -0,0 +1,463 @@ +1. +```html + + + + + + + Document + + + + +
+
1
+
2
+
3
+
+ + + +``` + +2. +```html + + + + + + + Document + + + + +
+
+
+ + + +``` +3. +```html + + + + + + + Document + + + + +
+
1
+
2
+
3
+
+ + + +``` + +4. +```html + + + + + + + Document + + + + +
+
+
+
+
+
+ + + +``` + +5. +```html + + + + + + + Document + + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+ + + +``` \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\242\250\351\225\234\345\245\263\345\255\251.jpg" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\242\250\351\225\234\345\245\263\345\255\251.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..ba48086cab936a6c4c0d0792471e5d54e91d31cb Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\242\250\351\225\234\345\245\263\345\255\251.jpg" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\245\263\345\255\251.jpg" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\245\263\345\255\251.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..1a6fa6054f91a0cb8616eab0116316d5cf3f3ac6 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\245\263\345\255\251.jpg" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\260\217\347\201\253\347\205\216.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\260\217\347\201\253\347\205\216.png" new file mode 100644 index 0000000000000000000000000000000000000000..03b86c8249d78b653db95fff220ebccaec7cee5f Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\345\260\217\347\201\253\347\205\216.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\346\211\201\345\244\264\351\262\250\351\261\274.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\346\211\201\345\244\264\351\262\250\351\261\274.png" new file mode 100644 index 0000000000000000000000000000000000000000..667e7fd5bd158f95ebfbce25fc5a866b3ad31704 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\346\211\201\345\244\264\351\262\250\351\261\274.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\201\257\347\254\274\351\261\274.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\201\257\347\254\274\351\261\274.png" new file mode 100644 index 0000000000000000000000000000000000000000..d60ff6ecde05412936fd712b7588684c3faf79a2 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\201\257\347\254\274\351\261\274.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\211\214J.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\211\214J.png" new file mode 100644 index 0000000000000000000000000000000000000000..aa91346b17db7b1c0a0da3be60a79c1537250e8e Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\211\214J.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\211\214Q.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\211\214Q.png" new file mode 100644 index 0000000000000000000000000000000000000000..b2364f5aa00b1865127c7d57d569496999752a23 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\211\214Q.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\213\227\345\260\276\345\267\264\350\215\211.jpg" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\213\227\345\260\276\345\267\264\350\215\211.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..67248159c4b149e3c2b069b8af04b3b1145cbe17 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\213\227\345\260\276\345\267\264\350\215\211.jpg" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\231\275\347\206\212.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\231\275\347\206\212.png" new file mode 100644 index 0000000000000000000000000000000000000000..5100a19f692cc06c4cdc5007aa3248a155d807c2 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\231\275\347\206\212.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\241\254\345\270\201\344\270\244\351\235\242.png" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\241\254\345\270\201\344\270\244\351\235\242.png" new file mode 100644 index 0000000000000000000000000000000000000000..9dbf1b1ad56501a0fd12ea48bc7192c1a0480fc8 Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\347\241\254\345\270\201\344\270\244\351\235\242.png" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\350\265\260\347\247\200.jpg" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\350\265\260\347\247\200.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..00ee222329eabde75bb36f862c3b7e21cacb132b Binary files /dev/null and "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/img/\350\265\260\347\247\200.jpg" differ diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.html" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.html" deleted file mode 100644 index 8f9a1ebcef708a9f942133685913a474aae8da78..0000000000000000000000000000000000000000 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\220\216\344\275\234\344\270\232/\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.html" +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - Document - - - - -
-
- -
-
- -
- - - \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.md" similarity index 68% rename from "\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" rename to "\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.md" index 94e2b2ffb6fed003ab3442c0a368b37acb5a5629..7ee223b524233472e855380ebfde83c559127e09 100644 --- "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241014-\350\277\207\345\272\246\343\200\2012D\350\275\254\346\215\242\343\200\2013D\350\275\254\346\215\242.md" @@ -125,61 +125,4 @@ rotateZ`要配合透视使用 transform: translateZ(360px); //沿着 Z 轴移动 -``` - -## 动画 - -### 定义动画的步骤 - -- 通过@keyframes定义动画； - -- 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； - -- 在指定元素里，通过 `animation` 属性调用动画。 -- 在 CSS3 中**定义动画**的时候，也是**先定义，再调用**： - -```css - 定义动画： - @keyframes 动画名{ - from{ 初始状态 } - to{ 结束状态 } - } - - 调用： - animation: 动画名称 持续时间； -``` -animation属性的格式如下： -```cs - animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) - - animation: move1 1s alternate linear 3; - - animation: move2 4s; -``` -### 动画属性 -`animation`属性的格式如下： -```cs - animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) - - animation: move1 1s alternate linear 3; - - animation: move2 4s; -``` -- 动画名称、持续时间两个属性，是必选项，且顺序固定。 -- 动画方向属性值：normal 正常，alternate 反向。 -- 运动曲线属性值可以是：linear（线性） ease-in-out（先加速后减速） steps()等。 -- 如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行 - -### steps()的效果 -在调用动画时，我们写成： - - -```cs - animation: move2 4s steps(2); -``` - -效果如下： - -![](http://img.smyhvae.com/20180209_1020.gif) - -有了属性值 `steps()`，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。 +``` \ No newline at end of file diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-\345\212\250\347\224\273\350\257\246\350\247\243(\344\270\215\350\200\203).md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-\345\212\250\347\224\273\350\257\246\350\247\243(\344\270\215\350\200\203).md" new file mode 100644 index 0000000000000000000000000000000000000000..b5aed7e53c03da7e764fc306870ea753700c11b4 --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241024-\345\212\250\347\224\273\350\257\246\350\247\243(\344\270\215\350\200\203).md" @@ -0,0 +1,57 @@ + +## 动画 + +### 定义动画的步骤 + +- 通过@keyframes定义动画； + +- 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； + +- 在指定元素里，通过 `animation` 属性调用动画。 +- 在 CSS3 中**定义动画**的时候，也是**先定义，再调用**： + +```css + 定义动画： + @keyframes 动画名{ + from{ 初始状态 } + to{ 结束状态 } + } + + 调用： + animation: 动画名称 持续时间； +``` +animation属性的格式如下： +```cs + animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + + animation: move1 1s alternate linear 3; + + animation: move2 4s; +``` +### 动画属性 +`animation`属性的格式如下： +```cs + animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + + animation: move1 1s alternate linear 3; + + animation: move2 4s; +``` +- 动画名称、持续时间两个属性，是必选项，且顺序固定。 +- 动画方向属性值：normal 正常，alternate 反向。 +- 运动曲线属性值可以是：linear（线性） ease-in-out（先加速后减速） steps()等。 +- 如果把属性值写成**` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行 + +### steps()的效果 +在调用动画时，我们写成： + + +```cs + animation: move2 4s steps(2); +``` + +效果如下： + +![](http://img.smyhvae.com/20180209_1020.gif) + +有了属性值 `steps()`，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。 diff --git "a/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241028-Flex\345\270\203\345\261\200.md" "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241028-Flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..18185ccf9686dc784b214b2723e01a962929f7bb --- /dev/null +++ "b/\346\234\261\346\225\254\351\221\253/\350\257\276\345\240\202\347\254\224\350\256\260/20241028-Flex\345\270\203\345\261\200.md" @@ -0,0 +1,54 @@ +### 概念：弹性盒子、子元素 + +在讲 flex 的知识点之前，我们事先约定两个概念： + +- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。 + +- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。 + +### 概念：主轴和侧轴 + +弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。 + +- 主轴：flex容器的主轴，默认是水平方向，从左向右。 + +- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。 + +### flex-direction 属性 + +主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向 +`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值可以是： + +| 属性值 | 描述 | +|:-------------|:-------------| +| row | 从左到右水平排列子元素（默认值） | +|column|从上到下垂直排列子元素| +| row-reverse |从右向左排列子元素 | +|column-reverse|从下到上垂直排列子元素| + +备注：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。 + +### flex-wrap 属性 + +`flex-wrap：wrap`换行 +`flex-wrap：no-wrap`不换行 + + +### justify-content 属性 + +- `justify-content`：控制子元素在主轴上的排列方式。 +- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是： + - `flex-start` 从主轴的起点对齐（默认值） + - `flex-end` 从主轴的终点对齐 + - `center` 居中对齐 + - `space-around` 在父盒子里平分 + - `space-between` 两端对齐 平分 + +### align-items 属性 + +`align-items`：设置子元素在**侧轴上的对齐方式**。属性值可以是： + - `flex-start` 从侧轴开始的方向对齐 + - `flex-end` 从侧轴结束的方向对齐 + - `baseline` 基线 默认同flex-start + - `center` 中间对齐 + - `stretch` 拉伸