From a732f9fd4665f2a5357b1e3e2ff648cae3df12df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A9=89=E5=A9=B7?= <2465898445@qq.com>
Date: Sun, 27 Oct 2024 22:04:14 +0800
Subject: [PATCH] tijiao

---
 ...47\350\257\246\350\247\243\344\270\200.md" |  76 +++++
 ...50\347\224\273\350\257\246\350\247\243.md" | 262 ++++++++++++++++++
 2 files changed, 338 insertions(+)
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\344\270\200.md"
 create mode 100644 "\347\216\213\345\251\211\345\251\267/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md"

diff --git "a/\347\216\213\345\251\211\345\251\267/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\344\270\200.md" "b/\347\216\213\345\251\211\345\251\267/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\344\270\200.md"
new file mode 100644
index 0000000..44c1518
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\344\270\200.md"
@@ -0,0 +1,76 @@
+# css属性详解
+ 
+ ## 文本
+ ### `text-shadow：1px 1px 1px #fff;`设置文本的阴影
+ - text-shadow:水平位移 垂直位移 模糊程度 阴影颜色;
+ #### 凹凸效果
+ ```css
+ .tu{
+   text-shadow:-1px -1px 1px #fff, 1px 1px 1px #000;
+ }
+  .ao {
+            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
+        }
+ ```
+
+ ## box-sizing 属性
+ -属性值：
+     - 外加模式：box-sizing：content-box; (盒子实际宽度 = 设计的width +padding +border)
+     - 内减模式：box-sizing：border-box; （盒子实际宽度 = 设计的width，不受padding，birder影响）
+
+
+## 渐变
+ - `background: -webkit-linear-gradient(left, green, yellow);`
+
+## 边框
+### 边框圆角：`border-radius`
+- 单个属性的写法：
+
+```css
+	border-top-left-radius: 60px 120px;        //参数解释：水平半径   垂直半径
+
+	border-top-right-radius: 60px 120px;
+
+	border-bottom-left-radius: 60px 120px;
+
+	border-bottom-right-radius: 60px 120px;
+
+```
+
+- 复合写法：
+
+```
+	border-radius: 60px/120px;             //参数：水平半径/垂直半径
+
+	border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
+
+	border-radius: 20px 60px;
+```
+
+- 最简洁的写法：（四个角的半径都相同时）
+
+```
+	border-radius: 60px;
+```
+
+### 边框阴影`box-shadow`
+- box-shadow：水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 ;
+- 参数解释：
+
+   - 水平偏移：正值向右 负值向左。
+
+   - 垂直偏移：正值向下 负值向上。
+
+   - 模糊程度：不能为负值。
+
+### 边框图片 
+- `border-image-sourse:url(路径)` 图片路径
+- `border-image-slice: 尺寸;`图片边框裁剪
+- /*图片边框的宽度*/
+	border-image-width: 27px;
+
+- /*边框图片的平铺*/
+	- /* repeat :正常平铺 但是可能会显示不完整*/
+	- /*round: 平铺 但是保证 图片完整*/
+	- /*stretch: 拉伸显示*/
+	- border-image-repeat: stretch;
\ No newline at end of file
diff --git "a/\347\216\213\345\251\211\345\251\267/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/\347\216\213\345\251\211\345\251\267/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md"
new file mode 100644
index 0000000..d4b48c7
--- /dev/null
+++ "b/\347\216\213\345\251\211\345\251\267/20241024-\345\212\250\347\224\273\350\257\246\350\247\243.md"
@@ -0,0 +1,262 @@
+# 动画详解
+## 过渡：transition
+
+`transition`的中文含义是**过渡**。过渡是CSS3中具有颠覆性的一个特征，可以实现元素**不同状态间的平滑过渡**（补间动画），经常用来制作动画效果。
+
+- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
+
+- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
+
+- **综合属性**：`transition:让哪些属性进行过渡 过渡持续的时间 运动曲线 延迟时间;`
+- `transition: all 3s linear 0s;`
+- 属性：
+  ```css
+  /* 让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡，用all*/
+  t transition-property:all ;ransition-property:width ; /* 只让盒子的宽度在变化时进行过度*/
+  transition-duration:1s; /* 过渡的持续时间 */
+  transition-timing-fuction:linear; /* 运动曲线*/
+    /* 属性：
+    linear：线性；
+     ease:减速；
+     ease-in：加速；
+     ease-out：减速 ；
+     ease-in-out：先加速后减速 */
+  ```
+
+  ## 2D转换
+  
+- **转换**是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。
+
+- 转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
+
+- 在 CSS3 当中，通过 `transform` 转换来实现 2D 转换或者 3D 转换。
+
+- 2D转换包括：缩放、移动、旋转。
+
+### 属性
+```c
+/* 1. 缩放`scale`*/
+transform:scale(x,y); /*  x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放*/
+
+/* 2、位移：translate*/
+transform: translate(水平位移, 垂直位移);
+
+/*3、旋转：rotate */
+transform: rotate(角度);
+transform: rotate(45deg);
+/*参数解释：正值 顺时针；负值：逆时针。*/
+
+
+```
+- 位移推荐做法 ，以前用margin-left：
+```javascript
+	div {
+	    width: 600px;
+	    height: 60px;
+	    background-color: red;
+	    position: absolute;       绝对定位的盒子
+	    left: 50%;               首先，让左边线居中
+	    top: 0;
+	    transform: translate(-50%);    然后，利用translate，往左走自己宽度的一半【推荐写法】
+	}
+```
+
+
+```javascript
+	transform-origin: 水平坐标 垂直坐标;
+
+	transform-origin: 50px 50px;
+
+	transform-origin: center bottom;   //旋转时，以盒子底部的中心为坐标原点
+```
+
+
+
+## 3D
+### 1、旋转：rotateX、rotateY、rotateZ
+- **3D坐标系（左手坐标系）**
+- 浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
+
+- **旋转的方向：（左手法则）**
+- 左手握住旋转轴，竖起拇指指向旋转轴的**正方向**，正向就是**其余手指卷曲的方向**。
+
+- **格式：**
+
+```javascript
+	transform: rotateX(360deg);    //绕 X 轴旋转360度
+
+	transform: rotateY(360deg);    //绕 Y 轴旋转360度
+
+	transform: rotateZ(360deg);    //绕 Z 轴旋转360度
+
+```
+
+-  /* 透视*/  perspective: 200px;
+
+```css
+  .box2 {
+            background: url(images/bg.png) right 0 no-repeat;
+            transform: rotateY(180deg); /*让图片的右半边默认时，旋转180度，就可以暂时隐藏起来*/
+
+        }
+
+        .box:hover .box1 {
+            transform: rotateY(180deg); /*让图片的左半边转消失*/
+        }
+
+        .box:hover .box2 {
+            transform: rotateY(0deg); /*让图片的左半边转出现*/
+        }
+```
+
+### 2、移动：translateX、translateY、translateZ
+
+**格式：**
+
+```javascript
+	transform: translateX(100px);    //沿着 X 轴移动
+
+	transform: translateY(360px);    //沿着 Y 轴移动
+
+	transform: translateZ(360px);    //沿着 Z 轴移动
+
+```
+
+```css
+.box:hover {
+            /* translateZ必须配合透视来使用*/
+            transform: translateZ(400px);
+        }
+```
+
+### 3、透视：perspective
+
+- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
+
+- 作为 transform 属性的一个值，做用于元素自身。
+
+### 4、3D呈现（transform-style）
+
+3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的**父元素**设置`transform-style: preserve-3d`来使其变成一个真正的3D图形。属性值可以如下：
+
+```css
+	transform-style: preserve-3d;     /* 让 子盒子 位于三维空间里 */
+
+	transform-style: flat;            /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
+
+```
+
+```css
+
+        @keyframes gun {
+            0% {
+                transform: rotateX(0deg) rotateY(0deg);
+            }
+
+            100% {
+                transform: rotateX(360deg) rotateY(360deg);
+            }
+        }
+```
+
+
+
+## 动画
+
+动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。
+
+### 1、定义动画的步骤
+
+（1）通过@keyframes定义动画；
+
+（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
+
+（3）在指定元素里，通过 `animation` 属性调用动画。
+
+之前,我们在 js 中定义一个函数的时候，是先定义，再调用：
+
+```javascript
+    js 定义函数：
+        function fun(){ 函数体 }
+
+     调用：
+     	fun();
+```
+
+同样，我们在 CSS3 中**定义动画**的时候，也是**先定义，再调用**：
+
+```javascript
+    定义动画：
+        @keyframes 动画名{
+            from{ 初始状态 }
+            to{ 结束状态 }
+        }
+
+     调用：
+      animation: 动画名称 持续时间；
+```
+
+其中，animation属性的格式如下：
+
+```javascript
+          /*  animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次) */
+
+            animation: move1 1s  alternate linear 3;
+
+            animation: move2 4s;
+```
+
+（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()`。
\ No newline at end of file
-- 
Gitee