From 738187e2b54b62d65e8b5eb6ec4d620419e7de8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E9=9B=AA=E8=8A=AC?= <2878756581@qq.com> Date: Sat, 2 Nov 2024 15:04:33 +0800 Subject: [PATCH] 1028 --- ...7\224\273&flex\345\270\203\345\261\200.md" | 301 ++++++++++++++++++ 1 file changed, 301 insertions(+) create mode 100644 "\351\273\204\351\233\252\350\212\254/20241028-\345\212\250\347\224\273&flex\345\270\203\345\261\200.md" diff --git "a/\351\273\204\351\233\252\350\212\254/20241028-\345\212\250\347\224\273&flex\345\270\203\345\261\200.md" "b/\351\273\204\351\233\252\350\212\254/20241028-\345\212\250\347\224\273&flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000..84c1d67 --- /dev/null +++ "b/\351\273\204\351\233\252\350\212\254/20241028-\345\212\250\347\224\273&flex\345\270\203\345\261\200.md" @@ -0,0 +1,301 @@ +## 动画 +动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。 +### 1、定义动画的步骤 +1. 通过@keyframes定义动画； +2. 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性； +3. 在指定元素里，通过 `animation` 属性调用动画。 + +```javascript + 定义动画： + @keyframes 动画名{ + from{ 初始状态 } + to{ 结束状态 } + } + + 调用： + animation: 动画名称 持续时间； +``` + +其中，animation属性的格式如下： + +```javascript + animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + + animation: move1 1s alternate linear 3; + + animation: move2 4s; +``` + +### 2、动画属性 +（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()的效果 +有了属性值 `steps()`，我们就可以作出很多不连续地动画效果 + +**step()举例：**时钟的简易模型 + +```html + + + + + + + + +
+ + +``` + +## flex +### flex 布局的优势 +1、**flex 布局的子元素不会脱离文档流**，很好地遵从了“流的特性”。 + +但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。 + +2、**flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范**。 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`这个属性，那么，子元素默认就是从左到右排列的。 + + +# 作业 +## 大鱼 +### 代码 +```html + + + + + + + Document + + + + +
+
+
+
+ + + +``` + +## 白熊 +### 代码 +```html + + + + + + Document + + + +
+
+
+ + +``` \ No newline at end of file -- Gitee