diff --git "a/\351\273\216\346\254\243\346\254\243/20241028--\345\212\250\347\224\273\347\254\224\350\256\260-\345\212\250\347\224\273\344\275\234\344\270\232.md" "b/\351\273\216\346\254\243\346\254\243/20241028--\345\212\250\347\224\273\347\254\224\350\256\260-\345\212\250\347\224\273\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..82e169c3ccf8f2308ee8bbb8ac798ba1b110d09a --- /dev/null +++ "b/\351\273\216\346\254\243\346\254\243/20241028--\345\212\250\347\224\273\347\254\224\350\256\260-\345\212\250\347\224\273\344\275\234\344\270\232.md" @@ -0,0 +1,528 @@ +# 作业 +# 效果图 +## 第一题效果图 +![第一题](./Imag/屏幕录制%202024-11-03%20212031.mp4) +```css + +``` +```html + +
+
+
+
《大鱼》
+
演唱:周深
+
+ 海浪无声将夜幕深深淹没
+ 漫过天空尽头的角落 +
+
+
+
+
+
《大鱼》
+
演唱:周深
+
+ 海浪无声将夜幕深深淹没
+ 漫过天空尽头的角落 +
+
+
+
+
+
《大鱼》
+
演唱:周深
+
+ 海浪无声将夜幕深深淹没
+ 漫过天空尽头的角落 +
+
+
+
+
+
《大鱼》
+
演唱:周深
+
+ 海浪无声将夜幕深深淹没
+ 漫过天空尽头的角落 +
+
+
+
+ + +``` +## 第二题效果图 +![第二题](./Imag/屏幕录制%202024-11-03%20212637.mp4) +```css + +``` +```html + +
+ +
+ +
+
+
+
+
+ +``` +## 第三题效果图 +![第三题](./Imag/屏幕录制%202024-11-03%20212000.mp4) +```css + +``` +```html + +
+
+ +
+
+ + +``` +# 笔记 +# 动画 +动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。 +## 1、定义动画的步骤 +（1）通过@keyframes定义动画； + +（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； + +（3）在指定元素里，通过 `animation` 属性调用动画。 + +我们在 CSS3 中**定义动画**的时候，也是**先定义，在调用** +```css + 定义动画： + @keyframes 动画名{ + from{ 初始状态 } + to{ 结束状态 } + } + + 调用： + animation: 动画名称 持续时间； +``` + +animation属性的格式如下： + +```js + animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + + animation: move1 1s alternate linear 3; + + animation: move2 4s; +``` + +**定义动画的格式：** + +```html + + + + + + + + +
+
+ + +``` +效果如下： +![](http://img.smyhvae.com/20180209_1001.gif) + +## 2、动画属性 + +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()`，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。 + +# CSS Flex布局 + +## 基本概念 + +- **容器（Container）**：使用 `display: flex;` 或 `display: inline-flex;` 定义的元素。 +- **项目（Items）**：容器内的直接子元素。 +- **轴（Axes）**： + - **主轴（Main Axis）**：由 `flex-direction` 属性定义，可以是水平（row）或垂直（column）。 + - **交叉轴（Cross Axis）**：与主轴垂直。 + +## 容器属性 + +- `display`：设置为 `flex` 或 `inline-flex`。 +- `flex-direction`：定义主轴的方向（`row` | `row-reverse` | `column` | `column-reverse`）。 +- `flex-wrap`：定义项目是否应该在需要时换行（`nowrap` | `wrap` | `wrap-reverse`）。 +- `flex-flow`：`flex-direction` 和 `flex-wrap` 的简写形式。 +- `justify-content`：定义项目在主轴上的对齐方式（`flex-start` | `flex-end` | `center` | `space-between` | `space-around` | `space-evenly`）。 +- `align-items`：定义项目在交叉轴上的对齐方式（`flex-start` | `flex-end` | `center` | `baseline` | `stretch`）。 +- `align-content`：定义多行项目在交叉轴上的对齐方式（`flex-start` | `flex-end` | `center` | `space-between` | `space-around` | `stretch`）。 + +## 项目属性 + +- `order`：定义项目的排序顺序（默认为0，数值越小越靠前）。 +- `flex-grow`：定义项目放大比例（默认为0，即如果空间不足，该项目不会放大）。 +- `flex-shrink`：定义项目缩小比例（默认为1，即如果空间不足，该项目会缩小）。 +- `flex-basis`：定义项目在主轴上的初始大小（可以是长度值，如 `20%`，或者 `auto`）。 +- `flex`：`flex-grow`、`flex-shrink` 和 `flex-basis` 的简写形式，如 `flex: 1 1 20%;`。 +- `align-self`：允许单个项目有与其他项目不同的对齐方式，覆盖容器的 `align-items` 属性。 + +## 实例 + +```css +.container { + display: flex; + flex-direction: row; /* 主轴水平 */ + justify-content: center; /* 主轴居中 */ + align-items: center; /* 交叉轴居中 */ +} + +.item { + flex: 1; /* 等分剩余空间 */ + /* 或者更详细的设置 */ + /* flex-grow: 1; */ + /* flex-shrink: 1; */ + /* flex-basis: 0; */ +} + + + diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\345\275\225\345\210\266 2024-11-03 212000.mp4" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\345\275\225\345\210\266 2024-11-03 212000.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..0b4d07d6751adc58a56ab2a499a1df2db64c5b21 Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\345\275\225\345\210\266 2024-11-03 212000.mp4" differ diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\345\275\225\345\210\266 2024-11-03 212031.mp4" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\345\275\225\345\210\266 2024-11-03 212031.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..408645f648d7067d990d20d5ae3f884ef15c9adf Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\345\275\225\345\210\266 2024-11-03 212031.mp4" differ diff --git "a/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\345\275\225\345\210\266 2024-11-03 212637.mp4" "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\345\275\225\345\210\266 2024-11-03 212637.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..6b5fcfd70f00575b001dec9061c803fd32e2a91a Binary files /dev/null and "b/\351\273\216\346\254\243\346\254\243/Imag/\345\261\217\345\271\225\345\275\225\345\210\266 2024-11-03 212637.mp4" differ