From d4b525141af6ee7ee27747123cab816bf61e6573 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, 27 Oct 2024 16:05:29 +0800
Subject: [PATCH] =?UTF-8?q?10.25=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

---
 ...36\346\200\247\350\257\246\350\247\243.md" | 432 ++++++++++++++++++
 1 file changed, 432 insertions(+)
 create mode 100644 "\350\214\203\344\275\263\346\254\243/20241025\345\212\250\347\224\273,\345\261\236\346\200\247\350\257\246\350\247\243.md"

diff --git "a/\350\214\203\344\275\263\346\254\243/20241025\345\212\250\347\224\273,\345\261\236\346\200\247\350\257\246\350\247\243.md" "b/\350\214\203\344\275\263\346\254\243/20241025\345\212\250\347\224\273,\345\261\236\346\200\247\350\257\246\350\247\243.md"
new file mode 100644
index 0000000..317611f
--- /dev/null
+++ "b/\350\214\203\344\275\263\346\254\243/20241025\345\212\250\347\224\273,\345\261\236\346\200\247\350\257\246\350\247\243.md"
@@ -0,0 +1,432 @@
+# 作业
+## 27.练习1
+>效果图：
+![](http://slihcs0w9.hn-bkt.clouddn.com/%E7%BB%83%E4%B9%A01-1.gif)
+>主要代码：
+```css
+  body {
+  background-color: #eee;
+}
+.all {
+  width: 800px;
+  height: 300px;
+  padding-left: 20px;
+
+}
+.aa{
+margin-top: 50px;
+    width: 270px;
+    height: 350px;
+}
+.aa:hover{
+    box-shadow: 0 0 15px gray;
+    transform: translateY(-20px);
+    transition: all 1s;
+}
+.a1 {
+  width: 270px;
+  height: 350px;
+  
+  text-align: center;
+ margin-left: 400px;
+ margin-bottom: 270px;
+  background-color: white;
+  float: left;
+  position: relative;
+  left: -60px;
+  top: -360px;
+  overflow: hidden;
+}
+.a1:hover{
+    box-shadow: 0 0 15px gray;
+    transform: translateY(-20px);
+    transition: all 1s;
+}
+
+.a2{
+    width: 270px;
+  height: 350px;
+  
+  text-align: center;
+ margin-left: 400px;
+ margin-bottom: 270px;
+  background-color: white;
+  float: left;
+  position: relative;
+  left: 280px;
+  top: -980px;
+  overflow: hidden;
+}
+.a2:hover{
+    box-shadow: 0 0 15px gray;
+    transform: translateY(-20px);
+    transition: all 1s;
+}
+.aa:hover {
+  box-shadow: 0 0 15px gray;
+  top: -5px;
+}
+.a1 .dd {
+  position: absolute;
+  left: 0;
+  bottom: -80px;
+  width: 100%;
+  height: 80px;
+  background-color: chocolate;
+  transition: all 1s;
+}
+.a2 .dd{
+    position: absolute;
+  left: 0;
+  bottom: -80px;
+  width: 100%;
+  height: 80px;
+  background-color: chocolate;
+  transition: all 1s;
+}
+img {
+  margin-top: 30px;
+}
+
+.a1:hover .dd {
+  bottom: 0;
+}
+.a2:hover .dd{
+    bottom: 0;
+}
+```
+```html
+    <div class="all">
+        <div class="aa">
+            <img src="./1练习.png" alt="">
+            <span class="dd"> </span>
+        </div>
+<div class="a1">
+    <img src="./2练习.png" alt="">
+    <span class="dd">
+    </span>
+</div>
+<div class="a2">
+    <img src="./3练习.jpg" alt="">
+    <span class="dd"> </span>
+</div>
+    </div>
+```
+## 27.练习2
+>效果图：
+![](http://slihcs0w9.hn-bkt.clouddn.com/%E7%BB%83%E4%B9%A02.gif)
+>主要代码：
+```css
+    body{
+margin: 200px;
+    }
+ 
+   
+    .hh{
+   
+        width: 200px;
+        height: 200px;
+        background-color: pink;
+    
+        transition: all 1s;
+    }
+    .hh:hover{
+        transform: rotate(-380deg);
+    }
+    .ww{
+        font-size: 50px;
+        color: blue;
+        transition: all 1s;
+    }
+ ```
+```html
+    <div class="hh">
+     <div class="ww">
+        遥遥领先
+    </div>
+    </div>
+```
+## 27.练习3
+>效果图：
+![](http://slihcs0w9.hn-bkt.clouddn.com/%E7%BB%83%E4%B9%A03.gif)
+>主要代码：
+```css
+    body{
+        width: 100%;
+        height: 100%;
+        background-color: orange;
+    }
+    img{
+        margin-top: 600px;
+        transition: all 3s;
+      transform:rotate(45deg);
+}
+    .hj:hover img{
+        transform: translate(900px,-300%) rotate(45deg);
+     }
+```
+```html
+    <div class="hj">
+   <img src="./火箭.png" alt="" >
+    </div>
+```
+## 27.练习4
+>效果图：
+![](http://slihcs0w9.hn-bkt.clouddn.com/%E7%BB%83%E4%B9%A04.gif)
+>主要代码：
+```css
+div {
+  width: 300px;
+  height: 400px;
+  margin: 50px auto;
+  position: relative;
+}
+
+img {
+  width: 100%;
+  position: absolute;
+  transition: all 0.5s;
+  transform-origin: center bottom;
+}
+
+.hh:hover :nth-child(1) {
+  transform: rotate(-60deg);
+}
+
+.hh:hover :nth-child(2) {
+  transform: rotate(-50deg);
+}
+
+.hh:hover :nth-child(3) {
+  transform: rotate(-40deg);
+}
+
+.hh:hover :nth-child(4) {
+  transform: rotate(-30deg);
+}
+
+.hh:hover :nth-child(5) {
+  transform: rotate(-20deg);
+}
+
+.hh:hover :nth-child(6) {
+  transform: rotate(-10deg);
+}
+
+.hh:hover :nth-child(7) {
+  transform: rotate(0deg);
+}
+
+.hh:hover :nth-child(8) {
+  transform: rotate(10deg);
+}
+
+.hh:hover :nth-child(9) {
+  transform: rotate(20deg);
+}
+
+.hh:hover :nth-child(10) {
+  transform: rotate(30deg);
+}
+
+.hh:hover :nth-child(11) {
+  transform: rotate(40deg);
+}
+
+.hh:hover :nth-child(12) {
+  transform: rotate(50deg);
+}
+
+.hh:hover :nth-child(13) {
+  transform: rotate(60deg);
+}
+```
+```html
+<div class="hh">
+  <img src="./牌J.png" alt="">
+  <img src="./牌Q.png" alt="">
+  <img src="./牌J.png" alt="">
+  <img src="./牌Q.png" alt="">
+  <img src="./牌J.png" alt="">
+  <img src="./牌Q.png" alt="">
+  <img src="./牌J.png" alt="">
+  <img src="./牌Q.png" alt="">
+  <img src="./牌J.png" alt="">
+  <img src="./牌Q.png" alt="">
+  <img src="./牌J.png" alt="">
+  <img src="./牌Q.png" alt="">
+  <img src="./牌J.png" alt="">
+</div>
+```
+## 27.练习5
+>效果图：
+![](http://slihcs0w9.hn-bkt.clouddn.com/%E7%BB%83%E4%B9%A05.gif)
+>主要代码：
+```css
+        .box {
+      width: 100%;
+      height: 500px;
+      background-color: #6495ed;
+      position: relative;
+    }
+    
+    .box div {
+      width: 303px;
+      height: 301px;
+      background-image: url(./练习5.png);
+      position: absolute;
+      left: 50%;
+      margin: 50px -150px;
+      transition: all 2s;
+      backface-visibility: hidden;
+    }
+    
+    .d1 {
+      background-position: 303px 0;
+      transform: rotateY(180deg);
+    }
+    
+    .d2 {
+      background-position: 0 0;
+    }
+    
+    .box:hover .d1 {
+      transform: rotateY(0deg);
+    }
+    
+    .box:hover .d2 {
+      transform: rotateY(180deg);
+    }
+```
+```html
+<div class="box">
+  <div class="d1"></div>
+  <div class="d2"></div>
+</div>
+```
+# 笔记
+## 选择器详解
+### 伪元素选择器
+伪元素选择器的标志性符号是 `::`。
+`举例效果展示：`
+![after和before](./伪元素after和before.PNG)
+```css
+   span::before{
+        content: '给我整笑了';
+        color: pink;
+        background-color: rgb(120, 195, 230);
+        width: 50px;
+        height: 50px;
+        display: inline-block;
+    }
+    span::after{
+        content: '真是幽默';
+        color: dodgerblue
+    }
+```
+```html
+
+    <!-- 伪元素 -->
+  <span>
+    哈哈哈哈哈
+  </span>
+```
+#### 格式(重要格式（写下来）)：
+`::after:在后面，弹性盒子`;
+`::first-letter:只对块级元素生效；设置某个元素的第一个字符的样式；display：block、`
+``E::first-line` 设置元素 E 里面的**第一行**的样式。`
+`::selection:设置某个元素里面被鼠标选择的区域样式`
+**行内元素，只有设置转换成款原宿才能设置宽高**
+
+- `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+- `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+`E:after`、`E:before `在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。新版本里，`E:after`、`E:before`会被自动识别为`E::after`、`E::before`，按伪元素来对待，这样做的目的是用来做兼容处理。
+
+`重要：`
+```
+、格式：（第一部分）**（重要）
+
+- `E:first-child` 匹配父元素的第一个子元素E。
+
+- `E:last-child` 匹配父元素的最后一个子元素E。
+
+- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起。
+
+- `E:nth-child(odd)` 匹配奇数
+
+- `E:nth-child(even)` 匹配偶数
+
+- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。
+```
+## 属性详解
+### text-shadow：设置文本的阴影
+**参数解释：水平位移 垂直位移 模糊程度 阴影颜色**
+![文本阴影展示](./文本阴影展示.PNG)
+![凹凸举例展示](./凹凸举例图.PNG)
+`代码举例展示：`
+```css
+       body{
+            background-color:#ddd;
+        }
+        div{
+            font-size: 50px;
+            text-align: center;
+            font-weight: bold;
+           
+            color:#666;
+        }
+        .s1{
+            text-shadow: -1px -1px 1px #fff,1px 1px 1px #000;
+        }
+        .s2{
+            text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
+        }
+```
+### 盒模型 box-sizing属性
+ ***外加模式：***
+  `box-sizing:content-box`
+  **实际宽度：=设置的width+padding+border**
+ ***内减模式：***
+ `box-sizing: border-box;`
+ **盒子的实际宽度 = 设置的 width**
+
+ ### 边框圆角：border-radius 属性
+ 边框圆角：`border-radius` 属性
+ 本质上是一个圆，圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆。
+ ```
+ 复合写法：
+border-radius: 60px/120px;             //参数：水平半径/垂直半径
+	border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
+order-radius: 20px 60px;
+```
+ ### 边框阴影：box-shadow 属性
+ 	box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
+    参数解释：
+
+- 水平偏移：正值向右 负值向左。
+
+- 垂直偏移：正值向下 负值向上。
+
+- 模糊程度：不能为负值。
+
+
+### 旋转：
+**rotateX、rotateY、rotateZ**
+  浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
+  格式：
+  ```css
+    transform: rotateX(360deg);    /* 绕 X 轴旋转360度 */
+	  transform: rotateY(360deg);    /* 绕 Y 轴旋转360度 */
+	  transform: rotateZ(360deg);    /* 绕 Z 轴旋转360度 */
+  ```
+
+### 移动：
+**translateX、translateY、translateZ**
+  格式：
+  ```css
+    transform: translateX(100px);    /* 沿着 X 轴移动 */
+	  transform: translateY(360px);    /* 沿着 Y 轴移动 */
+	  transform: translateZ(360px);    /* 沿着 Z 轴移动 */
+  ```
\ No newline at end of file
-- 
Gitee