From 3f4c6004f08ff23f36bd1fe391af5d52ccc75a57 Mon Sep 17 00:00:00 2001 From: Yzh0407 Date: Mon, 21 Oct 2024 17:27:52 +0800 Subject: [PATCH 1/5] =?UTF-8?q?20241021-CSS=E5=AE=9A=E4=BD=8D=E5=B1=9E?= =?UTF-8?q?=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...32\344\275\215\345\261\236\346\200\247.md" | 172 ++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 "\345\217\266\345\255\220\350\241\241/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" diff --git "a/\345\217\266\345\255\220\350\241\241/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\345\217\266\345\255\220\350\241\241/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" new file mode 100644 index 0000000..497cb7b --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247.md" @@ -0,0 +1,172 @@ +CSS属性：定位属性 +=== + +CSS的定位属性有三种，分别是绝对定位、相对定位和固定定位。 + +## 相对定位 + +**相对定位**是指元素相对于自己原来的位置进行位置调整。使用相对定位时，元素仍然占据其原始位置，但可以通过设置`left`、`top`、`right`、`bottom`属性来微调元素的位置。 + +### 语法 + +```css +position: relative; /* 相对定位 */ +left: 50px; /* 横坐标：正值表示向右偏移，负值表示向左偏移 */ +top: 50px; /* 纵坐标：正值表示向下偏移，负值表示向上偏移 */ +``` + +### 举例 + +```html + + + + + + + + + Document + + + + +
有生之年
+
狭路相逢
+ + +``` + +### 特性 + +- **不脱标**：相对定位的元素仍然占据原来的空间，其他元素不会因为它的移动而重新排列。 +- **用途**： + - 微调元素位置。 + - 作为绝对定位子元素的参考。 + +### 定位属性总结 + +- `left`：盒子向右移动。 +- `right`：盒子向左移动。 +- `top`：盒子向下移动。 +- `bottom`：盒子向上移动。 + +## 绝对定位 + +**绝对定位**是指元素相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是页面的``或``元素）。 + +### 语法 + +```css +position: absolute; /* 绝对定位 */ +left: 10px; /* 横坐标 */ +top: 20px; /* 纵坐标 */ +``` + +### 特性 + +- **脱标**：绝对定位的元素脱离了标准文档流，其他元素不会因为它的存在而重新排列。 +- **参考点**： + 1. 如果使用`top`，参考点是页面的左上角。 + 2. 如果使用`bottom`，参考点是浏览器窗口的左下角。 + +### 举例 + +```html +
+
+ 绝对定位的元素 +
+
+``` + +### 注意事项 + +- 绝对定位的元素不受父元素的`padding`影响。 +- 用于制作“压盖”效果时非常有效。 + +## 固定定位 + +**固定定位**是指元素相对于浏览器窗口进行定位，无论页面如何滚动，该元素的位置始终保持不变。 + +### 语法 + +```css +position: fixed; /* 固定定位 */ +bottom: 10px; /* 距离窗口底部10像素 */ +right: 10px; /* 距离窗口右边10像素 */ +``` + +### 用途 + +1. **返回顶部按钮**：通常用于网页右下角的“返回顶部”按钮。 +2. **固定导航条**：常用于网页顶部的导航条，保持在页面顶部。 + +### 举例 + +```html + + +返回顶部 +``` + +## z-index属性 + +**z-index**属性用于控制元素的堆叠顺序，数值大的元素会覆盖数值小的元素。需要注意的是： + +- 只有具有定位属性（相对、绝对、固定定位）的元素才能使用`z-index`。 +- 默认的`z-index`值是0，如果元素没有设置，按照文档顺序叠加。 + +### 注意事项 + +- `z-index`值越大，元素在层叠上下文中的位置越高。 +- 具有相同`z-index`值的元素，后出现的元素会覆盖先出现的元素。 + +### 举例 + +```html + + +
下层元素
+
上层元素
+``` -- Gitee From 45df9156dac332458efff5146f1a9f4038efd29f Mon Sep 17 00:00:00 2001 From: Yzh0407 Date: Tue, 22 Oct 2024 00:03:52 +0800 Subject: [PATCH 2/5] =?UTF-8?q?20241021-CSS=E5=AE=9A=E4=BD=8D=E5=B1=9E?= =?UTF-8?q?=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\345\257\274\350\210\252\346\235\241.html" | 48 ++ ...32\344\275\215\344\275\234\344\270\232.md" | 447 ++++++++++++++++++ ...\346\241\206\347\244\272\344\276\213.html" | 34 ++ ...\350\276\276\345\275\261\345\237\216.html" | 134 ++++++ ...\345\205\255\345\233\276\346\240\207.html" | 109 +++++ ...\351\275\220\347\244\272\344\276\213.html" | 46 ++ 6 files changed, 818 insertions(+) create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\233\272\345\256\232\345\257\274\350\210\252\346\235\241.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\256\232\344\275\215\344\275\234\344\270\232.md" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\346\217\220\347\244\272\346\241\206\347\244\272\344\276\213.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\344\270\207\350\276\276\345\275\261\345\237\216.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\345\205\255\345\233\276\346\240\207.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\273\235\345\257\271\345\256\232\344\275\215\344\270\216\345\261\205\344\270\255\345\257\271\351\275\220\347\244\272\344\276\213.html" diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\233\272\345\256\232\345\257\274\350\210\252\346\235\241.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\233\272\345\256\232\345\257\274\350\210\252\346\235\241.html" new file mode 100644 index 0000000..49f8da9 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\233\272\345\256\232\345\257\274\350\210\252\346\235\241.html" @@ -0,0 +1,48 @@ + + + + + + + 固定导航条 + + + + +
+

你好

+
+ +
+ + + + + + + + +
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\256\232\344\275\215\344\275\234\344\270\232.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\256\232\344\275\215\344\275\234\344\270\232.md" new file mode 100644 index 0000000..b37f0a6 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\345\256\232\344\275\215\344\275\234\344\270\232.md" @@ -0,0 +1,447 @@ +### 二十六、定位 + +1. 创建一个在其父级容器中水平、垂直居中的绝对定位元素，如下效果： + +![image](https://img.haruka.net.cn/image/2024/10/21/12dbwpa.png) +源码： + +```html + + + + + + + 绝对定位与居中对齐示例 + + + + +
+
在其父级容器中水平、垂直居中的绝对定位的DIV
+
+ + + +``` + +效果图：![image](https://img.haruka.net.cn/image/2024/10/21/12frze3.png) + +2. 在页面顶部创建一个固定不动的导航条，要求不遮盖下面的内容 + +![image](https://img.haruka.net.cn/image/2024/10/21/12dkn7b.png) +源码： + +```html + + + + + + + 固定导航条 + + + + +
+

你好

+
+ +
+ + + + + + + + +
+ + + +``` + +效果图：![screenshots](https://img.haruka.net.cn/image/2024/10/21/12hia3s.gif) + +3. 创建一个悬浮在文字下方的提示框,当鼠标经过的时候展示出来，鼠标移开不显示 + +![image](https://img.haruka.net.cn/image/2024/10/21/12dvzzt.png) +源码： + +```html + + + + + + + 提示框示例 + + + + + 你好我是杨成豪，想听我说马普吗 + 老板，能不能再相应些？ + + + + + +``` + +效果图：![screenshots](https://img.haruka.net.cn/image/2024/10/21/12ionni.gif) + +4. 使用提供的素材，利用精灵图技术实现如下效果 + +素材： + +![image](https://img.haruka.net.cn/image/2024/10/21/12dyeh9.png) + +效果： + +![image](https://img.haruka.net.cn/image/2024/10/21/12e1nyz.png) +源码： + +```html + + + + + + + 精灵图技术六图标 + + + + +
+
+
付款图标
+
+
+ +
存款图标
+
+ +
+ +
删除图标
+
+
+ +
粘贴图标
+
+ +
+ +
笑脸图标
+
+ +
+ +
编辑图标
+
+ + + +``` + +效果图：![image](https://img.haruka.net.cn/image/2024/10/21/12k3t1o.png) + +5. 使用提供的素材，实现如下效果 + +素材： + +![image](https://img.haruka.net.cn/image/2024/10/21/12e4fxv.png) + +![image](https://img.haruka.net.cn/image/2024/10/21/12e66fx.png) + +``` +文字素材：广东深圳宝安区建安一路海雅缤纷城4楼 +``` + +效果： + +![image](https://img.haruka.net.cn/image/2024/10/21/12egock.png) + +源码： + +```html + + + + + + + 精灵图技术万达影城 + + + + +
+
+
+
+
+ 广东深圳宝安区建安一路海雅缤纷城4楼 +
+
+
+
【海雅缤纷城】万达影城（深圳海雅广场...
+
单人电影票，可观看2D
+
+
¥35
+
¥80
+
已售225
+
+
+
+ + + +``` + +效果图：![image](https://img.haruka.net.cn/image/2024/10/21/12klxal.png) + +6. 2014年春招面试题，请按如下图片要求画出相应的示意线 + +![image](https://img.haruka.net.cn/image/2024/10/21/12eiax6.png) + +效果图：![image](https://img.haruka.net.cn/image/2024/10/22/5dry.png) \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\346\217\220\347\244\272\346\241\206\347\244\272\344\276\213.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\346\217\220\347\244\272\346\241\206\347\244\272\344\276\213.html" new file mode 100644 index 0000000..5285bc0 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\346\217\220\347\244\272\346\241\206\347\244\272\344\276\213.html" @@ -0,0 +1,34 @@ + + + + + + + 提示框示例 + + + + + 你好我是杨成豪，想听我说马普吗 + 老板，能不能再相应些？ + + + + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\344\270\207\350\276\276\345\275\261\345\237\216.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\344\270\207\350\276\276\345\275\261\345\237\216.html" new file mode 100644 index 0000000..9acab8a --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\344\270\207\350\276\276\345\275\261\345\237\216.html" @@ -0,0 +1,134 @@ + + + + + + + 精灵图技术万达影城 + + + + +
+
+
+
+
+ 广东深圳宝安区建安一路海雅缤纷城4楼 +
+
+
+
【海雅缤纷城】万达影城（深圳海雅广场...
+
单人电影票，可观看2D
+
+
¥35
+
¥80
+
已售225
+
+
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\345\205\255\345\233\276\346\240\207.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\345\205\255\345\233\276\346\240\207.html" new file mode 100644 index 0000000..fcd2f9b --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\262\276\347\201\265\345\233\276\346\212\200\346\234\257\345\205\255\345\233\276\346\240\207.html" @@ -0,0 +1,109 @@ + + + + + + + 精灵图技术六图标 + + + + +
+
+
付款图标
+
+
+ +
存款图标
+
+ +
+ +
删除图标
+
+
+ +
粘贴图标
+
+ +
+ +
笑脸图标
+
+ +
+ +
编辑图标
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\273\235\345\257\271\345\256\232\344\275\215\344\270\216\345\261\205\344\270\255\345\257\271\351\275\220\347\244\272\344\276\213.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\273\235\345\257\271\345\256\232\344\275\215\344\270\216\345\261\205\344\270\255\345\257\271\351\275\220\347\244\272\344\276\213.html" new file mode 100644 index 0000000..5c215b8 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241021-CSS\345\256\232\344\275\215\345\261\236\346\200\247/\347\273\235\345\257\271\345\256\232\344\275\215\344\270\216\345\261\205\344\270\255\345\257\271\351\275\220\347\244\272\344\276\213.html" @@ -0,0 +1,46 @@ + + + + + + + 绝对定位与居中对齐示例 + + + + +
+
在其父级容器中水平、垂直居中的绝对定位的DIV
+
+ + + \ No newline at end of file -- Gitee From d8f338133b8b8212a3966639060cacb71da88ab4 Mon Sep 17 00:00:00 2001 From: Yzh0407 Date: Sun, 27 Oct 2024 12:39:32 +0800 Subject: [PATCH 3/5] =?UTF-8?q?20241024-=E5=8A=A8=E7=94=BB=E8=BF=87?= =?UTF-8?q?=E6=B8=A12D=E8=BD=AC=E6=8D=A23D=E8=BD=AC=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...54\346\215\242\344\275\234\344\270\232.md" | 857 ++++++++++++++++++ ...\351\261\274\345\260\217\351\261\274.html" | 101 +++ ...\345\260\217\347\201\253\347\256\255.html" | 35 + ...\347\261\263\345\225\206\345\237\216.html" | 130 +++ ...\347\211\207\345\217\230\346\232\227.html" | 116 +++ ...\346\211\221\345\205\213\347\211\214.html" | 94 ++ .../\346\227\213\350\275\254.html" | 55 ++ .../\347\231\275\347\206\212.html" | 65 ++ .../\347\277\273\350\275\254.html" | 57 ++ 9 files changed, 1510 insertions(+) create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242\344\275\234\344\270\232.md" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\244\247\351\261\274\345\260\217\351\261\274.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\260\217\347\201\253\347\256\255.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\260\217\347\261\263\345\225\206\345\237\216.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\202\254\346\265\256\346\226\207\345\255\227\345\233\276\347\211\207\345\217\230\346\232\227.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\211\221\345\205\213\347\211\214.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\227\213\350\275\254.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\231\275\347\206\212.html" create mode 100644 "\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\277\273\350\275\254.html" diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242\344\275\234\344\270\232.md" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242\344\275\234\344\270\232.md" new file mode 100644 index 0000000..30c479f --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242\344\275\234\344\270\232.md" @@ -0,0 +1,857 @@ +### 二十七、过渡、2D转换、3D转换 + +#### 1. 实现如下效果 + +**素材：** + +- ![素材1](https://img.haruka.net.cn/image/2024/10/24/hc8xfu.png) +- ![素材2](https://img.haruka.net.cn/image/2024/10/24/hcnnj8.png) +- ![素材3](https://img.haruka.net.cn/image/2024/10/24/hcpk3v.png) + +**题目演示图：** + +![演示图1](https://img.haruka.net.cn/image/2024/10/24/hd5yzg.gif) + +--- + +**源代码：** + +```html + + + + + + + Document + + + + +
+
+ 梦葉樱图床 +
+
+ 梦葉樱图床 + +
+
+ 梦葉樱图床 + +
+
+ + + +``` + +--- + +**作答效果图：** + +![](https://img.haruka.net.cn/image/2024/10/27/kbgsw5.gif) + +--- + +#### 2. 实现如下效果 + +**题目演示图：** + +![演示图2](https://img.haruka.net.cn/image/2024/10/24/he0aho.gif) + +--- + +**源代码：** + +```html + + + + + + + Document + + + + +
遥遥领先
+
+
+ + + +``` + +--- + +**作答效果图：** + +![](https://img.haruka.net.cn/image/2024/10/27/kbqa96.gif) + +--- + +#### 3. 实现如下效果-小火箭 + +**素材：** + +![小火箭素材](https://img.haruka.net.cn/image/2024/10/24/hecbmg.png) + +**题目演示图：** + +![演示图3](https://img.haruka.net.cn/image/2024/10/24/heg11c.gif) + +--- + +**源代码：** + +```html + + + + + + + + + + + + + +``` + +--- + +**作答效果图：** + +![](https://img.haruka.net.cn/image/2024/10/27/kbq8x7.gif) + +--- + +#### 4. 实现如下效果-纸牌 + +**素材：** + +- ![纸牌素材1](https://img.haruka.net.cn/image/2024/10/24/hely88.png) +- ![纸牌素材2](https://img.haruka.net.cn/image/2024/10/24/hexu8m.png) + +**题目演示图：** + +![演示图4](https://img.haruka.net.cn/image/2024/10/24/hf1pm0.gif) + +--- + +**源代码：** + +```html + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ + + +``` + +--- + +**作答效果图：** + +![](https://img.haruka.net.cn/image/2024/10/27/kbr5m6.gif) + +--- + +#### 5. 实现如下效果-品牌 + +**素材：** + +![品牌素材](https://img.haruka.net.cn/image/2024/10/24/hfmwex.png) + +**题目演示图：** + +![演示图5](https://img.haruka.net.cn/image/2024/10/24/hfqr8g.gif) + +--- + +**源代码：** + +```html + + + + + + + Document + + + + +
+
+
+
+ + + +``` + +--- + +**作答效果图：** + +![](https://img.haruka.net.cn/image/2024/10/27/kbu430.gif) + +--- + +### 二十八、动画 + +#### 1. 实现如下效果-歌曲 + +**素材：** + +- ![](https://img.haruka.net.cn/image/2024/10/24/i7mmy0-0.jpg) +- ![](https://img.haruka.net.cn/image/2024/10/24/i7t9ff-0.jpg) +- ![](https://img.haruka.net.cn/image/2024/10/24/i84r26-0.jpg) +- ![](https://img.haruka.net.cn/image/2024/10/24/i863cx-0.jpg) + +**题目演示图：** + +![演示图6](https://img.haruka.net.cn/image/2024/10/24/iai4du.gif) + +--- + +**源代码：** + +```html + + + + + + + Document + + + + +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + + +``` + +--- + +**作答效果图：** + +![](https://img.haruka.net.cn/image/2024/10/27/kbv9zm.gif) + +--- + +#### 2. 实现如下效果-大鱼 + +**素材：** + +- ![](https://img.haruka.net.cn/image/2024/10/24/i8bg3s-0.png) +- ![](https://img.haruka.net.cn/image/2024/10/24/i8dtz6-0.png) + +**题目演示图：** + +![](https://img.haruka.net.cn/image/2024/10/24/i8sds3-0.gif) + +--- + +**源代码：** + +```html + + + + + + + + + + +
+
+
+ +
+
+
+ + + +``` + +--- + +**作答效果图：** + +![](https://img.haruka.net.cn/image/2024/10/27/kbtqr9.gif) + +--- + +#### 3. 实现如下效果-白熊 + +**素材：** + +![白熊素材](https://img.haruka.net.cn/image/2024/10/24/i8xj1b-0.png) + +**题目演示图：** + +![演示图8](https://img.haruka.net.cn/image/2024/10/24/i8zcb4-0.gif) + +--- + +**源代码：** + +```html + + + + + + + Document + + + + +
+
+
+
+
+ + + +``` + +--- + +**作答效果图：** + +![](https://img.haruka.net.cn/image/2024/10/27/kbve3z.gif) diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\244\247\351\261\274\345\260\217\351\261\274.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\244\247\351\261\274\345\260\217\351\261\274.html" new file mode 100644 index 0000000..f6be1a0 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\244\247\351\261\274\345\260\217\351\261\274.html" @@ -0,0 +1,101 @@ + + + + + + + + + + +
+
+
+ +
+
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\260\217\347\201\253\347\256\255.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\260\217\347\201\253\347\256\255.html" new file mode 100644 index 0000000..b4b9a3f --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\260\217\347\201\253\347\256\255.html" @@ -0,0 +1,35 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\260\217\347\261\263\345\225\206\345\237\216.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\260\217\347\261\263\345\225\206\345\237\216.html" new file mode 100644 index 0000000..a30aab0 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\345\260\217\347\261\263\345\225\206\345\237\216.html" @@ -0,0 +1,130 @@ + + + + + + + Document + + + + +
+
+ 梦葉樱图床 +
+
+ 梦葉樱图床 + +
+
+ 梦葉樱图床 + +
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\202\254\346\265\256\346\226\207\345\255\227\345\233\276\347\211\207\345\217\230\346\232\227.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\202\254\346\265\256\346\226\207\345\255\227\345\233\276\347\211\207\345\217\230\346\232\227.html" new file mode 100644 index 0000000..2c3e8dc --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\202\254\346\265\256\346\226\207\345\255\227\345\233\276\347\211\207\345\217\230\346\232\227.html" @@ -0,0 +1,116 @@ + + + + + + + Document + + + + +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + 《大鱼》 + 演唱：周深 + 海浪无声将夜幕深深淹没，漫过天空尽头的角落 +
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\211\221\345\205\213\347\211\214.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\211\221\345\205\213\347\211\214.html" new file mode 100644 index 0000000..b464383 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\211\221\345\205\213\347\211\214.html" @@ -0,0 +1,94 @@ + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\227\213\350\275\254.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\227\213\350\275\254.html" new file mode 100644 index 0000000..18e1be6 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\346\227\213\350\275\254.html" @@ -0,0 +1,55 @@ + + + + + + + Document + + + + +
遥遥领先
+
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\231\275\347\206\212.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\231\275\347\206\212.html" new file mode 100644 index 0000000..b16e7c8 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\231\275\347\206\212.html" @@ -0,0 +1,65 @@ + + + + + + + Document + + + + +
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\277\273\350\275\254.html" "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\277\273\350\275\254.html" new file mode 100644 index 0000000..7d1e587 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273\350\277\207\346\270\2412D\350\275\254\346\215\2423D\350\275\254\346\215\242/\347\277\273\350\275\254.html" @@ -0,0 +1,57 @@ + + + + + + + Document + + + + +
+
+
+
+ + + \ No newline at end of file -- Gitee From dd681089c6b8e8a95ad5d0b6d1c99cd219fd79b1 Mon Sep 17 00:00:00 2001 From: Yzh0407 Date: Sun, 27 Oct 2024 13:08:43 +0800 Subject: [PATCH 4/5] =?UTF-8?q?20241023-CSS=E5=B1=9E=E6=80=A7=E8=AF=A6?= =?UTF-8?q?=E8=A7=A3=E5=9F=BA=E7=A1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...46\350\247\243\345\237\272\347\241\200.md" | 143 ++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 "\345\217\266\345\255\220\350\241\241/20241023-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\237\272\347\241\200.md" diff --git "a/\345\217\266\345\255\220\350\241\241/20241023-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\237\272\347\241\200.md" "b/\345\217\266\345\255\220\350\241\241/20241023-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\237\272\347\241\200.md" new file mode 100644 index 0000000..faceea5 --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/20241023-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\237\272\347\241\200.md" @@ -0,0 +1,143 @@ +# CSS3属性详解基础 + +## 文本属性 + +### 文本阴影 (`text-shadow`) + +`text-shadow`属性可以为文本设置阴影，从而增强视觉效果，特别是用于突出显示标题或强调文本。其基本格式如下： + +```css +text-shadow: [水平位移] [垂直位移] [模糊半径] [阴影颜色]; +``` + +#### 示例 + +```css +text-shadow: 20px 27px 22px pink; +``` + +- **水平位移**：控制阴影的水平偏移量，正值向右，负值向左。 +- **垂直位移**：控制阴影的垂直偏移量，正值向下，负值向上。 +- **模糊半径**：定义阴影的模糊程度，数值越大阴影越模糊。 +- **阴影颜色**：阴影的颜色。 + +#### 举例：凹凸文字效果 + +可以利用`text-shadow`设置多个阴影，以实现凹凸文字的效果。此方法通过设置不同方向的阴影色彩来模拟立体感。 + +```html + + +
立体效果
+``` + +## 盒模型属性 + +### `box-sizing` 属性 + +在CSS3中，盒模型的计算方式可以通过`box-sizing`属性进行定义。这一属性决定了元素的宽度和高度是否包含内边距（padding）和边框（border）。 + +- **外加模式**：`box-sizing: content-box;`（默认值） + - 宽度和高度指的是内容区域。 + - 总宽度 = 设置的`width` + `padding` + `border`。 + +- **内减模式**：`box-sizing: border-box;` + - 宽度和高度指的是盒子的总宽度。 + - 总宽度 = 设置的`width`，即边框和内边距的改变不会影响盒子总宽度。 + +#### 示例 + +```css +box-sizing: border-box; +``` + +使用`border-box`能够更容易控制元素的总宽度和高度，特别是在响应式布局中。 + +## 边框属性 + +CSS3提供了更丰富的边框样式选择，例如边框圆角和阴影效果，可以让边框更具层次感和视觉吸引力。 + +### 边框圆角 (`border-radius`) + +`border-radius`可以让元素的边角呈现圆形或椭圆形，适用于按钮、图片等。 + +#### 属性详解 + +- **单角设置**：指定各个角的弧度。 + ```css + border-top-left-radius: 60px 120px; + ``` +- **整体设置**：同时指定四个角的弧度。 + + ```css + border-radius: 20px 60px 100px 140px; + ``` + +#### 示例代码 + +```html + + +
+``` + +### 效果展示 + +![](https://img.haruka.net.cn/image/2024/10/27/kmm0fq-0.png) + +### 边框阴影 (`box-shadow`) + +边框阴影增加了盒子的立体效果，常用于强调按钮、图片、卡片等元素。 + +#### 属性语法 + +```css +box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [阴影颜色] [inset]; +``` + +- `inset`用于创建内阴影，默认是外阴影。 + +#### 示例代码 + +```css +box-shadow: 15px 21px 48px -2px #666; +``` + +## 其他高级边框样式 + +CSS3还引入了边框图片的设置，可以为边框使用图案或图像，适合实现个性化设计。 + +### 边框图片属性 + +- `border-image-source`: 图片路径。 +- `border-image-slice`: 图片裁剪。 +- `border-image-width`: 图片宽度。 +- `border-image-repeat`: 图片平铺方式（`repeat`、`round`、`stretch`）。 + +#### 综合写法 + +```css +border-image: url("border.png") 27 / 20px round; +``` + +在实际应用中，可以将一个图片裁剪成九宫格，使用图片的边缘来设置边框。 + +![](https://img.haruka.net.cn/image/2024/10/27/kn5zo6-0.png) + -- Gitee From 83de277a0247e6c4d7d968a4b1725cb61f0173a3 Mon Sep 17 00:00:00 2001 From: Yzh0407 Date: Sun, 27 Oct 2024 13:09:18 +0800 Subject: [PATCH 5/5] =?UTF-8?q?20241024-CSS=E5=B1=9E=E6=80=A7=E8=AF=A6?= =?UTF-8?q?=E8=A7=A3=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...46\350\247\243\345\212\250\347\224\273.md" | 126 ++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 "\345\217\266\345\255\220\350\241\241/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\212\250\347\224\273.md" diff --git "a/\345\217\266\345\255\220\350\241\241/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\212\250\347\224\273.md" "b/\345\217\266\345\255\220\350\241\241/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\212\250\347\224\273.md" new file mode 100644 index 0000000..ba2a05a --- /dev/null +++ "b/\345\217\266\345\255\220\350\241\241/20241024-CSS\345\261\236\346\200\247\350\257\246\350\247\243\345\212\250\347\224\273.md" @@ -0,0 +1,126 @@ + +# CSS属性详解动画 + +## 过渡：transition +### 基本概念 +过渡是一种在特定时间内平滑地改变一个或多个CSS属性值的效果。 + +### 主要属性 +- **transition-property**： + - 定义需要进行过渡的CSS属性，可以是具体属性或`all`（所有可过渡的属性）。 + +- **transition-duration**： + - 定义过渡效果持续的时间，通常以秒（s）或毫秒（ms）为单位。 + +- **transition-timing-function**： + - 定义过渡的速度曲线。 + - 常用值： + - `linear`：匀速变化。 + - `ease`：开始和结束慢，中间快。 + - `ease-in`：开始慢。 + - `ease-out`：结束慢。 + - `ease-in-out`：开始和结束都慢。 + +- **transition-delay**： + - 定义过渡效果开始之前的延迟时间。 + +### 用法 +通过添加或修改CSS属性，可以触发过渡效果。常用于鼠标悬停、焦点等状态变化。 + +--- + +## 2D 转换：transform +### 基本概念 +2D转换用于对元素进行旋转、缩放、平移和倾斜等操作，能够创建复杂的视觉效果。 + +### 主要属性 +- **transform**： + - 定义需要应用的2D转换效果。 + +### 常用函数 +- `translate(x, y)`：移动元素。 +- `scale(x, y)`：缩放元素。 +- `rotate(angle)`：旋转元素。 +- `skew(x-angle, y-angle)`：倾斜元素。 + +--- + +## 3D 转换：transform +### 基本概念 +3D转换是对元素进行3D效果的处理，能够让元素在三维空间中旋转和移动。 + +### 主要属性 +- **transform**： + - 结合`perspective`和3D转换函数来创建3D效果。 + +### 常用函数 +- `translateZ(z)`：在Z轴上移动元素。 +- `rotateX(angle)`：绕X轴旋转元素。 +- `rotateY(angle)`：绕Y轴旋转元素。 +- `rotateZ(angle)`：绕Z轴旋转元素。 +- `scaleZ(z)`：沿Z轴缩放元素。 + +--- + +## 动画：animation +### 基本概念 +动画通过改变元素的样式来创建动态效果，能够实现更复杂的视觉表现。 + +### 主要属性 +- **animation-name**： + - 定义动画的名称，对应于`@keyframes`中的名称。 + +- **animation-duration**： + - 定义动画完成一个周期所需的时间，通常以秒（s）或毫秒（ms）为单位。 + +- **animation-timing-function**： + - 定义动画在不同时间点的速度变化。 + - 常用值： + - `linear`：匀速变化。 + - `ease`：开始慢，结束慢，中间快。 + - `ease-in`：开始慢。 + - `ease-out`：结束慢。 + - `ease-in-out`：开始和结束都慢。 + +- **animation-delay**： + - 定义动画开始之前的延迟时间。 + +- **animation-iteration-count**： + - 定义动画的重复次数，可以是整数或`infinite`（无限次）。 + +- **animation-direction**： + - 定义动画的播放方向。 + - 可选值： + - `normal`：正常播放。 + - `reverse`：反向播放。 + - `alternate`：交替播放（正向和反向）。 + - `alternate-reverse`：交替反向播放。 + +- **animation-fill-mode**： + - 定义在动画播放之前或之后元素的样式。 + - 可选值： + - `none`：默认值，不影响元素样式。 + - `forwards`：保持动画结束时的样式。 + - `backwards`：保持动画开始时的样式。 + - `both`：同时应用`forwards`和`backwards`。 + +- **animation-play-state**： + - 控制动画的播放状态。 + - 可选值： + - `running`：动画运行中。 + - `paused`：动画暂停。 + +### 关键帧规则 +- **@keyframes**：定义动画的关键帧。 +- 语法： + ```css + @keyframes animation-name { + from { + /* 起始状态 */ + } + to { + /* 结束状态 */ + } + } + ``` + - 可以使用百分比定义中间状态，如 `0%`、`50%`、`100%`。 -- Gitee