From 6fb2819e6422253ebf80d5221b118849a3762824 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E7=91=9E=E5=87=AF?= <123456>
Date: Sun, 27 Oct 2024 20:30:48 +0800
Subject: [PATCH] =?UTF-8?q?1025=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...24\342\200\224\345\212\250\347\224\273.md" | 243 ++++++++++++++++++
 1 file changed, 243 insertions(+)
 create mode 100644 "\345\221\250\347\221\236\345\207\257/20241025\342\200\224\342\200\224\345\212\250\347\224\273.md"

diff --git "a/\345\221\250\347\221\236\345\207\257/20241025\342\200\224\342\200\224\345\212\250\347\224\273.md" "b/\345\221\250\347\221\236\345\207\257/20241025\342\200\224\342\200\224\345\212\250\347\224\273.md"
new file mode 100644
index 0000000..ab65091
--- /dev/null
+++ "b/\345\221\250\347\221\236\345\207\257/20241025\342\200\224\342\200\224\345\212\250\347\224\273.md"
@@ -0,0 +1,243 @@
+# CSS3属性详解：动画详解
+主要内容：
+
+- 过渡：transition
+
+- 2D 转换 transform
+
+- 3D 转换 transform
+
+- 动画：animation
+
+## 过渡：transition
+
+`transition`的中文含义是**过渡**。过渡是CSS3中具有颠覆性的一个特征，可以实现元素**不同状态间的平滑过渡**（补间动画），经常用来制作动画效果。
+
+- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
+
+- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
+
+transition 包括以下属性：
+
+- `transition-property: all;`  如果希望所有的属性都发生过渡，就使用all。
+
+- `transition-duration: 1s;` 过渡的持续时间。
+
+- `transition-timing-function: linear;`  运动曲线。属性值可以是：
+	- `linear` 线性
+	- `ease`  减速
+	- `ease-in` 加速
+	- `ease-out` 减速
+	- `ease-in-out`  先加速后减速
+
+- `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。
+
+上面的四个属性也可以写成**综合属性**：
+
+## 2D 转换
+
+**转换**是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。
+
+转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
+
+在 CSS3 当中，通过 `transform` 转换来实现 2D 转换或者 3D 转换。
+
+- 2D转换包括：缩放、移动、旋转。
+
+我们依次来讲解。
+
+### 1、缩放：`scale`
+
+格式：
+
+```javascript
+	transform: scale(x, y);
+
+	transform: scale(2, 0.5);
+```
+
+### 2、位移：translate
+
+格式：
+
+
+```javascript
+	transform: translate(水平位移, 垂直位移);
+
+	transform: translate(-50%, -50%);
+```
+
+### 3、旋转：rotate
+
+格式：
+
+```javascript
+	transform: rotate(角度);
+
+	transform: rotate(45deg);
+```
+
+# 练习 
+
+## 效果图
+
+<img src="https://pic.imgdb.cn/item/671e3d46d29ded1a8c4266b4.gif" alt="GIF11.gif">
+
+## 代码
+```html
+<style>
+        body{
+            margin: 0;
+            width: 0;
+        }
+        .content{
+            width: 800px;
+            height: 320px;
+            padding-left: 20px;
+            margin: 80px auto;
+        }
+        .d1{
+            width: 230px;
+            height: 300px;
+            text-align: center;
+            margin-right: 20px;
+            background-color: white;
+            float: left;
+            position: relative;
+            top: 0;
+            overflow: hidden;
+            transition: all 1s;  
+        }
+        .d1 img{
+            margin-top: 30px;
+        }
+        .d1 .s1{
+            position: absolute;
+            left: 0;
+            bottom: -80px;
+            width: 100%;
+            height: 80px;
+            background-color: chocolate;
+            transition: all 1s;
+        }
+
+        .d1:hover{
+            top: -5px;
+            box-shadow: 0 0 15px gray;
+        }
+
+        .d1:hover .s1{
+            bottom: 0;
+        }
+    </style>
+
+    <div class="content">
+        <div class="d1">
+            <img src="./img/1.png" alt="">
+        </div>
+
+        <div class="d1">
+            <img src="./img/2.png" alt="">
+            <span class="s1"></span>
+        </div>
+
+        <div class="d1">
+            <img src="./img/3.jpg" alt="">
+            <span class="s1"></span>
+        </div>
+    </div>
+```
+```html
+    <style>
+        .d1{
+            width: 200px;
+            height: 200px;
+            background-color: red;
+            font-size: 100px;
+            transition: all 1s;
+        }
+        .d1:hover{
+            transform: rotate(3600deg);
+        }
+    </style>
+
+
+```
+```html
+
+    <style>
+        div{
+            background-color: chocolate;
+            width: 1000px;
+            height: 1000px;
+        }
+        .i1{
+            position: absolute;
+            left: 100px;
+            top: 600px;
+            height: 120px;
+            transform: translate(-200px,200px) rotate(45deg);
+            transition: all 1s ;
+        }
+        div:hover .i1{
+            transform: translate(500px,-500px) rotate(45deg);
+        }
+    </style>
+
+
+```
+```html
+    <style>
+        div{
+            width: 300px;
+            height: 440px;
+            margin: 100px auto;
+            position: relative;
+        }
+
+        img{
+            width: 100%;
+            transition: all 1s;
+            position: absolute;
+            left: 0;
+            top: 0;
+            transform-origin: center bottom;
+        }
+        div:hover img:nth-child(6) {
+            transform: rotate(-10deg);
+        }
+        div:hover img:nth-child(5) {
+            transform: rotate(-20deg);
+        }
+        div:hover img:nth-child(4) {
+            transform: rotate(-30deg);
+        }
+        div:hover img:nth-child(3) {
+            transform: rotate(-40deg);
+        }
+        div:hover img:nth-child(2) {
+            transform: rotate(-50deg);
+        }
+        div:hover img:nth-child(1) {
+            transform: rotate(-60deg);
+        }
+        div:hover img:nth-child(8) {
+            transform: rotate(10deg);
+        }
+        div:hover img:nth-child(9) {
+            transform: rotate(20deg);
+        }
+        div:hover img:nth-child(10) {
+            transform: rotate(30deg);
+        }
+        div:hover img:nth-child(11) {
+            transform: rotate(40deg);
+        }
+        div:hover img:nth-child(12) {
+            transform: rotate(50deg);
+        }
+        div:hover img:nth-child(13) {
+            transform: rotate(60deg);
+        }
+    </style>
+```
\ No newline at end of file
-- 
Gitee