From 0f3f1701c832c63bbb1c4af81e7ca14675fa5729 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8C=83=E4=BD=B3=E6=AC=A3?=
<14091193+fanjxin@user.noreply.gitee.com>
Date: Sun, 3 Nov 2024 20:58:19 +0800
Subject: [PATCH] =?UTF-8?q?10.28=E4=BD=9C=E4=B8=9A=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...7\224\273.flex\345\261\236\346\200\247.md" | 243 ++++++++++++++++++
1 file changed, 243 insertions(+)
create mode 100644 "\350\214\203\344\275\263\346\254\243/20241028\345\212\250\347\224\273.flex\345\261\236\346\200\247.md"
diff --git "a/\350\214\203\344\275\263\346\254\243/20241028\345\212\250\347\224\273.flex\345\261\236\346\200\247.md" "b/\350\214\203\344\275\263\346\254\243/20241028\345\212\250\347\224\273.flex\345\261\236\346\200\247.md"
new file mode 100644
index 0000000..32bd96c
--- /dev/null
+++ "b/\350\214\203\344\275\263\346\254\243/20241028\345\212\250\347\224\273.flex\345\261\236\346\200\247.md"
@@ -0,0 +1,243 @@
+# 笔记
+## 动画
+### 动画举例练习
+`主要代码：`
+```css
+ .a1{
+ width: 200px;
+ height: 200px;
+ background-color: rgb(217, 186, 247);
+ transform: rotate(30deg);
+ animation: hh 2s steps(1);
+ }
+ @keyframes hh{
+ 0%{
+ transform: translate(0px,0px);
+
+ }
+ 25%{
+ transform: translate(650px,0px);
+ border-radius: 50px;
+ background-color: aqua;
+ }
+ 50%{
+ transform: translate(650px,500px);
+ border-radius: 50%;
+ background-color: rgb(221, 184, 226);
+ }
+ 75%{
+ transform: translate(0px,500px);
+ border-radius: 50px;
+ background-color: rgb(207, 36, 107);
+ }
+ 100%{
+ transform: translate(0px,0px);
+ }
+ }
+```
+```html
+
+
+
+```
+```
+（1）通过**@keyframes**定义动画；
+
+（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+（3）在指定元素里，通过 `animation` 属性调用动画。
+```
+**先定义，在调用**
+```
+ 定义动画：
+ @keyframes 动画名{
+ from{ 初始状态 }
+ to{ 结束状态 }
+ }
+
+ 调用：
+ animation: 动画名称 持续时间;
+```
+**格式：**
+```
+ animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
+
+ animation: move1 1s alternate linear 3;
+
+ animation: move2 4s;
+```
+## 动画属性
+```
+a.动画名称：
+animation-name: move;
+b.执行一次动画的持续时间：
+animation-duration: 4s;
+c.动画的执行次数：
+animation-iteration-count: 1; //iteration的含义表示迭代
+d.动画的方向：
+animation-direction: alternate;
+e.动画延迟执行：
+animation-delay: 1s;
+f.设置动画结束时，盒子的状态：
+animation-fill-mode: forwards;
+g.运动曲线：
+animation-timing-function: ease-in
+```
+### steps()的效果
+***eg:animation: move2 4s steps(2);***
+#### 秒针代码举例：
+`主要代码：`
+```css
+ /* 子绝父相 */
+ *{
+ margin: 0px;
+ padding: 0px;
+ }
+ .hh1{
+ position: absolute;
+ top: 50%;
+ left: 500px;
+ width: 200px;
+ height: 2px;
+ transform: rotate(-90deg);
+ background-color: blueviolet;
+ transform-origin:left center ;
+ animation: hh1 60s steps(60);
+ }
+ .hh2{
+ position: relative;
+ border: 1px solid black;
+ }
+ @keyframes hh1 {
+ from{
+ transform: rotate(-90deg);
+ }
+ to{
+ transform: rotate(270deg);
+ }
+ }
+```
+```html
+
+
+
+```
+# 作业
+## 鲨鱼和小鱼
+>效果图:
+
+>主要代码：
+```css
+ div {
+ width: 1800px;
+ height: 800px;
+ background-color: #8ec0ce;
+ }
+
+ .d1 {
+ width: 174px;
+ height: 126px;
+ background: url(./小鱼.png) no-repeat;
+ animation: fish 1s steps(8) infinite, fishBox 20s;
+ }
+
+ .d2 {
+ width: 509px;
+ height: 270px;
+ background: url(./鲨鱼.png) no-repeat;
+ animation: shark 1s steps(8) infinite, sharkBox 20s;
+ }
+
+ @keyframes fish {
+ from {
+ background-position: 0 0;
+ }
+
+ to {
+ background-position: 0px -1008px;
+ }
+ }
+
+ @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);
+ }
+ }
+
+ @keyframes shark {
+ from {
+ background-position: 0 0;
+ }
+
+ to {
+ background-position: 0px -2160px;
+ }
+ }
+
+ @keyframes sharkBox {
+ from {
+ transform: translate(0, 0);
+ }
+
+ to {
+ transform: translate(1000px, 0px);
+ }
+ }
+```
+```html
+
+
+```
+## 白熊
+>效果图：
+
+>主要代码：
+```css
+ .h1{
+ width: 1000px;
+ height: 100px;
+ background-color: rgb(24, 138, 24);
+ overflow: hidden;
+ }
+ .hh{
+ background-image: url(./白熊.png);
+ width: 200px;
+ height: 100px;
+ animation: move 2s steps(8)infinite;
+ }
+ @keyframes move {
+ from {
+ transform: translate(0, 0);
+ }
+
+ to {
+ background-position: -1600px 0;
+ }
+ }
+```
+```html
+
+
+