From 47ebb78da5b9856e1ee57bc61a6483aec93f2bc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=81=BF?= <2262917336@qq.com>
Date: Wed, 30 Oct 2024 21:06:02 +0800
Subject: [PATCH] 20241028

---
 ...43\200\201flex\345\270\203\345\261\200.md" | 258 ++++++++++++++++++
 1 file changed, 258 insertions(+)
 create mode 100644 "\345\210\230\347\201\277/20241028-\345\212\250\347\224\273\343\200\201flex\345\270\203\345\261\200.md"

diff --git "a/\345\210\230\347\201\277/20241028-\345\212\250\347\224\273\343\200\201flex\345\270\203\345\261\200.md" "b/\345\210\230\347\201\277/20241028-\345\212\250\347\224\273\343\200\201flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..71a88c4
--- /dev/null
+++ "b/\345\210\230\347\201\277/20241028-\345\212\250\347\224\273\343\200\201flex\345\270\203\345\261\200.md"
@@ -0,0 +1,258 @@
+## 动画
+动画可以通过设置多个节点来精确控制一个或一组动画
+
+### 定义动画
+1. 通过`@keyframes`定义动画
+2. 将这段动画通过百分比，分割成多个节点，然后各节点分别定义各属性
+3. 在指定元素里，通过`animation`属性调动动画
+
+```css
+定义动画：
+    @keyframes 动画名{
+        from{ 初始状态 }
+        to{ 结束状态 }
+    }
+调用：
+    animation: 动画名称 持续时间 执行次数 是否反向  运动曲线 延迟执行。(infinite 表示无限次)；
+    animation: move2 4s;
+```
+
+### 动画属性
+animation属性的格式：
+```css
+animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
+animation: move1 1s  alternate linear 3;
+animation: move2 4s;
+```
+
+animation是综合属性，前两个属性是必选项，且顺序固定，拆分开如下：
+1. `动画名称`：animation-name: move;
+2. `执行一次动画的持续时间`：animation-duration: 4s;
+3. 执行次数：animation-iteration-count: 1;  （iteration的含义表示迭代）
+4. 动画的方向：animation-direction: alternate;（normal 正常，alternate 反向）
+5. 动画延迟执行：animation-delay: 1s;
+6. 动画结束时盒子的状态：animation-fill-mode: forwards;（ forwards保持动画结束后的状态（默认），backwards动画结束后回到最初的状态。）
+7. 运动曲线：animation-timing-function: ease-in;（如果把属性值写成**steps()，则表示动画不是连续执行**，而是间断地分成几步执行。）
+
+
+## flex布局
+默认文档流中，在一个父容器里放置多个块级的子元素，那么，这些子元素会默认从上往下排列。
+
+在此基础之上，如果我给父容器仅仅加一个 display: flex属性，那么子元素们会在**水平方向上，从左至右排列**
+
+### flex布局的优势
+1. flex布局的子元素不会脱离文档流
+2. 是一种现代的布局方式，是W3C第一次提供真正的用于布局的CSS规范
+
+### 弹性盒子、子元素
+- 弹性盒子：指的是使用`display:flex`或`display:inline-flex`声明的**父容器**
+- 子元素/弹性元素：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）
+
+### 主轴和侧轴
+- 主轴：flex容器的主轴，默认是水平方向，**从左向右**。
+- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，**从上往下**。
+
+主轴和侧轴并不是固定不变的，可以通过 flex-direction 更换方向
+
+
+# 作业(动画)
+
+## 歌曲
+### 效果图
+![歌词](sjyniuybm.hn-bkt.clouddn.com/歌词.gif)
+### 代码
+```css
+ .d1,.d2,.d3,.d4 {
+    width: 280px;
+    height: 370px;
+    color: white;
+    padding: 5px;
+    background-repeat: no-repeat;
+
+    float: left;
+    margin: 5px;
+    position: relative;
+    overflow: hidden;
+}
+.d1 {
+    background-image: url(../img/动画/1-1.JPG);
+}
+.d2 {
+    background-image: url(../img/动画/1-2.JPG);
+}
+.d3 {
+    background-image: url(../img/动画/1-3.JPG);
+}
+.d4 {
+    background-image: url(../img/动画/1-4.JPG);
+}
+.song {
+    width: 270px;
+    height: 135px;
+    position: absolute;
+    top: 200px;
+    margin: 5px;
+}
+.bgc {
+    width: 280px;
+    height: 370px;
+    margin: -5px;
+}
+.bgc:hover {
+    animation: bgColor 4s;
+}
+@keyframes bgColor {
+    from {
+        background-color: transparent;
+    }
+    to {
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+}
+.song:hover h3 {
+    animation: h3 2s;
+}
+/* 《大鱼》 */
+@keyframes h3 {
+    from {
+        transform: translate(0px, -300px);
+    }
+    to {
+        transform: translate(0px, 0px);
+    }
+}
+.song:hover .p1 {
+    animation: p1 2s;
+}
+/* 演唱 */
+@keyframes p1 {
+    from {
+        transform: translate(-100px, 0px);
+    }
+    to {
+        transform: translate(0px, 0px);
+    }
+}
+.song:hover .p2 {
+    animation: p2 2s;
+}
+/* 歌词 */
+@keyframes p2 {
+    from {
+        transform: translate(0px, 300px);
+    }
+    to {
+        transform: translate(0px, 0px);
+    }
+}
+```
+```html
+<div class="d1">
+    <div class="bgc">
+        <div class="song">
+            <h3>《大鱼》</h3>
+            <p class="p1">演唱：周深</p>
+            <p class="p2">海浪无声将夜幕深深淹没，漫过天空尽头的角落</p>
+        </div>
+    </div>
+</div>
+```
+
+## 大鱼
+### 效果图
+![大鱼](sjyniuybm.hn-bkt.clouddn.com/大鱼.gif)
+### 代码
+```css
+div {
+    width: 1800px;
+    height: 800px;
+    background-color: #add9e6;
+}
+.d2 {
+    width: 174px;
+    height: 126px;
+    background: url(../img/动画/2-1-fish.png) no-repeat;
+    animation: fish 1s steps(12) infinite, fishBox 20s;
+}
+@keyframes fish {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: 0px -1512px;
+    }
+}
+@keyframes fishBox {
+    0% {
+        transform: translate(0, 0);
+    }
+    25% {
+        transform: translate(600px, 0px) rotate(90deg);
+    }
+    50% {
+        transform: translate(600px, 600px) rotate(180deg);
+    }
+    75% {
+        transform: translate(0px, 600px) rotate(270deg);
+    }
+    100% {
+        transform: translate(0px, 0px) rotate(360deg);
+    }
+}
+.d3 {
+    width: 509px;
+    height: 270px;
+    background: url(../img/动画/2-2-shark.png) no-repeat;
+    animation: shark 1s steps(8) infinite, sharkBox 20s;
+}
+@keyframes shark {
+    from {
+        background-position: 0 0;
+    }
+    to {
+        background-position: 0px -2160px;
+    }
+}
+@keyframes sharkBox {
+    from {
+        transform: translate(0, 0);
+    }
+    to {
+        transform: translate(1000px, 0px);
+    }
+}
+```
+
+## 白熊
+### 效果图
+![白熊](sjyniuybm.hn-bkt.clouddn.com/白熊.gif)
+### 代码
+```css
+.d1 {
+    width: 1000px;
+    height: 100px;
+    background-color: #007f00;
+}
+.bear {
+    width: 200px;
+    height: 100px;
+    background: url(../img/动画/3-1-白熊.png) no-repeat;
+    animation: bear 1s steps(8) infinite, bearBox 10s;
+}
+@keyframes bear {
+    from {
+    background-position: 0 0;
+    }
+    to {
+    background-position: -1600px 0px;
+    }
+}
+@keyframes bearBox {
+    form {
+    transform: translate(0, 0);
+    }
+    to {
+    transform: translate(1000px, 0px);
+    }
+}
+```
\ No newline at end of file
-- 
Gitee