diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/1.png" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..599dbe48c3fba3fe0549e88d5d79f6f863d9acc8 Binary files /dev/null and "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/1.png" differ diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/2.html" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/2.html" new file mode 100644 index 0000000000000000000000000000000000000000..e88bdd2311318a7d4af8a7579b661c3026126b22 --- /dev/null +++ "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/2.html" @@ -0,0 +1,25 @@ + + + + + Document + + + + + +
遥遥领先
+ + \ No newline at end of file diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/2.png" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/2.png" new file mode 100644 index 0000000000000000000000000000000000000000..e08ba74213094bf8a7cb7c6e84a9adc499518aae Binary files /dev/null and "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/2.png" differ diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/20231017204046.png" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/20231017204046.png" new file mode 100644 index 0000000000000000000000000000000000000000..03b86c8249d78b653db95fff220ebccaec7cee5f Binary files /dev/null and "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/20231017204046.png" differ diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/2025.html" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/2025.html" new file mode 100644 index 0000000000000000000000000000000000000000..2217f0a2ab9646fc7956b180efcb2408760e2780 --- /dev/null +++ "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/2025.html" @@ -0,0 +1,62 @@ + + + + + + Document + + + + +
+
+
+
+
+ + \ No newline at end of file diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/3.jpg" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/3.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..1ba3b393e92797493150bb43edb2cb6d61177c9a Binary files /dev/null and "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/3.jpg" differ diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/33.html" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/33.html" new file mode 100644 index 0000000000000000000000000000000000000000..49970075b424b22768e1d8449fed043ab2ab4995 --- /dev/null +++ "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/33.html" @@ -0,0 +1,31 @@ + + + + + + Document + + + + + + + \ No newline at end of file diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/444.html" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/444.html" new file mode 100644 index 0000000000000000000000000000000000000000..2cab417870b0bd1eca7952ef5a4b175f832821c8 --- /dev/null +++ "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/444.html" @@ -0,0 +1,92 @@ + + + + + + Document + + + +
+ + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/\347\211\214J.png" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/\347\211\214J.png" new file mode 100644 index 0000000000000000000000000000000000000000..aa91346b17db7b1c0a0da3be60a79c1537250e8e Binary files /dev/null and "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/\347\211\214J.png" differ diff --git "a/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/\347\211\214Q.png" "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/\347\211\214Q.png" new file mode 100644 index 0000000000000000000000000000000000000000..b2364f5aa00b1865127c7d57d569496999752a23 Binary files /dev/null and "b/\351\231\210\344\274\237\351\221\253/\344\275\234\344\270\232/1025/\347\211\214Q.png" differ diff --git "a/\351\231\210\344\274\237\351\221\253/\347\254\224\350\256\260/20241025.md" "b/\351\231\210\344\274\237\351\221\253/\347\254\224\350\256\260/20241025.md" new file mode 100644 index 0000000000000000000000000000000000000000..eff387500b9ca2dec5bf7516d546dd4b73260b10 --- /dev/null +++ "b/\351\231\210\344\274\237\351\221\253/\347\254\224\350\256\260/20241025.md" @@ -0,0 +1,291 @@ +# 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); +``` + + +# 作业 +![20241027-1534-51.2032722]( http://sli9dr8c2.hn-bkt.clouddn.com/h5/20241027-1534-51.2032722.mp4) +```html + + + + + + Document + + + + +
+
+
+
+
+ + +``` + +![20241027-1538-40.9581748]( http://sli9dr8c2.hn-bkt.clouddn.com/h5/20241027-1538-40.9581748.mp4) + +```html + +``` + +![20241027-1544-05.3401248]( http://sli9dr8c2.hn-bkt.clouddn.com/h5/20241027-1544-05.3401248.mp4) + +```html + + + + + + +``` + +![20241027-1547-50.6596526]( http://sli9dr8c2.hn-bkt.clouddn.com/h5/20241027-1547-50.6596526.mp4) + +```html + + + + + + + Document + + + +
+ + + + + + + + + + + + + +
+ + +``` \ No newline at end of file