From 92970e1224f12ee7128ce94bdf9eae154e54075d Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 27 Oct 2024 22:15:58 +0800 Subject: [PATCH] =?UTF-8?q?'=E5=8A=A8=E7=94=BB=E5=B1=9E=E6=80=A7'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20241025\345\212\250\347\224\273.md" | 301 ++++++++++++++++++ 1 file changed, 301 insertions(+) create mode 100644 "\351\231\206\346\245\232\347\233\210/20241025\345\212\250\347\224\273.md" diff --git "a/\351\231\206\346\245\232\347\233\210/20241025\345\212\250\347\224\273.md" "b/\351\231\206\346\245\232\347\233\210/20241025\345\212\250\347\224\273.md" new file mode 100644 index 0000000..bc6879e --- /dev/null +++ "b/\351\231\206\346\245\232\347\233\210/20241025\345\212\250\347\224\273.md" @@ -0,0 +1,301 @@ +# 作业 +[第一题](http://slhv0eiew.hd-bkt.clouddn.com/%E7%AC%AC%E4%B8%80%E9%A2%98.mp4) +```html +主要代码 + *{ + margin: 0; + padding: 0; + } + .d1{ + width: 230px; + height: 300px; + float: left; + overflow: hidden; + position: relative; + transition: all 1s; + } + .d1:hover{ + box-shadow: -1px -1px 15px -5px black; + top: -1px; + } + img{ + margin-top: 15px; + } + span{ + width: 100%; + height: 50px; + background-color: orange; + position: absolute; + bottom: -60px; + transition: all 1s; + } + .d1:hover span{ + bottom: 0px; + } +``` + +[遥遥领先](http://slhv0eiew.hd-bkt.clouddn.com/%E9%81%A5%E9%81%A5%E9%A2%86%E5%85%88.mp4) +```html +主要代码 + div{ + background-color: red; + height: 200px; + width: 200px; + color:white; + font-size: 50px; + transition: all 1s; + } + div:hover{ + transform: rotate(360deg); + } +``` + +[火箭](http://slhv0eiew.hd-bkt.clouddn.com/%E7%81%AB%E7%AE%AD.mp4) +```html +主要代码 + div{ + width: 800px; + height: 800px; + background-color: #DE8910; + } + img{ + position: absolute; + margin-top: 600px; + transform:translate(-200px ,200px) rotate(45deg); + transition:all 1s; + } + + div:hover img{ + transform:translate(500px,-500px) rotate(45deg); + } +``` + +[扑克牌](http://slhv0eiew.hd-bkt.clouddn.com/%E6%89%91%E5%85%8B%E7%89%8C.mp4) +```html +主要代码 + div{ + width: 400px; + height: 600px; + margin: 50px auto; + position: relative; +} +img{ + width: 100%; + position: absolute; + transition: all 1s; + transform-origin: center bottom; +} +div:hover :nth-child(1){ + transform: rotate(-40deg); +} +div:hover :nth-child(2){ + transform: rotate(-30deg); +} +div:hover :nth-child(3){ + transform: rotate(-20deg); +} +div:hover :nth-child(4){ + transform: rotate(-10deg); +} +div:hover :nth-child(5){ + transform: rotate(0deg); +} +div:hover :nth-child(6){ + transform: rotate(10deg); +} +div:hover :nth-child(7){ + transform: rotate(20deg); +} +div:hover :nth-child(8){ + transform: rotate(30deg); +} +div:hover :nth-child(9){ + transform: rotate(40deg); +} +``` + + + + +# 结构伪类选择器 +伪类选择器的标志性符号是` ： ` +CSS中有一些伪类选择器，比如`：link`,`：visited`,`:hover`,`:active`,`:focus` + +CSS3又新增了其它的伪类选择器---**结构伪类选择器**：即通过**结构**来进行筛选。 + + +**1、格式：（第一部分）**（重要） + +- `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。 + +理解： + +（1）这里我们要好好理解**父元素**的含义，它指的是：以 E 元素的父元素为参考。 + +（2）注意：以上选择器中所选到的元素的类型，必须是指定的类型E，如果选不中，则无效。这个要好好理解，具体可以看CSS参考手册中的`E:nth-child(n)`的示例。我们可以理解成：**先根据选择器找到选中的全部位置，如果发现某个位置不是类型E，则该位置失效**。 + +（3）另外，`E:nth-child(n)`这个属性也很有意思： +``` +* 如果选择器写成`li:nth-child(2)`，则表示第2个 `li`。 +* 如果选择器写成`li:nth-child(n)`，则表示**所有的**`li`。因为此时的 `n` 表示 0,1,2,3,4,5,6,7,8.....（当n小于1时无效，因为n = 0 也是不会选中的） +* 如果选择器写成`li:nth-child(2n)`，则表示所有的**第偶数个** li。 +* 如果选择器写成`li:nth-child(2n+1)`，则表示所有的**第奇数个** li。 +* 如果选择器写成`li:nth-child(-n+5)`，则表示**前5个** li。 +* 如果选择器写成`li:nth-last-child(-n+5)`，则表示**最后5个** li。 +* 如果选择器写成`li:nth-child(7n)`，则表示选中7的倍数。。 +``` +**2、格式：（第二部分）** + +- `E:first-of-type` 匹配同类型中的第一个同级兄弟元素E。 + +- `E:last-of-type` 匹配同类型中的最后一个同级兄弟元素E。 + +- `E:nth-of-type(n)` 匹配同类型中的第n个同级兄弟元素E。 + +- `E:nth-last-of-type(n)` 匹配同类型中的倒数第n个同级兄弟元素E。 + +既然上面这几个选择器带有`type`，我们可以这样理解：先在同级里找到所有的E类型，然后根据 n 进行匹配。 + + +**3、格式：（第三部分）** + +- `E:empty` 匹配没有任何子节点（包括空格等text节点）的元素E。 + +- `E:target` 匹配相关URL指向的E元素。要配合锚点使用。 + +# 伪元素选择器 +**1、格式：（第一部分）** + +- `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 + +- `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。 + +`E:after`、`E:before `在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。新版本里，`E:after`、`E:before`会被自动识别为`E::after`、`E::before`，按伪元素来对待，这样做的目的是用来做兼容处理。 + +**2、格式：（第二部分）** + +- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。 + +- `E::first-line` 设置元素 E 里面的**第一行**的样式。 + +- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。 + +# CSS属性详解 +## 文本 +### text-shadow:设置文本的阴影 +``` +格式举例： +text-shadow:20px 27px 22px pink +参数解释：水平位移 垂直位移 模糊程度 阴影颜色 +``` +#### 举例：凹凸文字效果 +text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开 +```html + .tu { + text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; + } + + .ao { + text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; + } + 实现凹凸文字效果的方式比较简单，给左上角放黑色的阴影，右下角放白色的阴影，就达到了凹下去的效果。 +``` + +### 盒模型中的box-sizing属性 +CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽度和高度的计算方式**。 + +这就需要用到 `box-sizing`属性。它的属性值可以是：`content-box`、`border-box` +**外加模式：**（css的默认方式） + +``` + box-sizing: content-box; +``` + +解释：此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。 + + +**内减模式：**【需要注意】 + +``` + box-sizing: border-box; +``` + + +解释：此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。 + +### 边框阴影：box-shadow属性 +格式举例： +``` +box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 +box-shadow: 15px 21px 48px -2px #666; +参数解释： + +* 水平偏移：正值向右 负值向左。 + +* 垂直偏移：正值向下 负值向上。 + +* 模糊程度：不能为负值。 +``` +## 过渡:transition +transition 包括以下属性： + +- `transition-property: all;` 如果希望所有的属性都发生过渡，就使用all。 + +- `transition-duration: 1s;` 过渡的持续时间。 + +- `transition-timing-function: linear;` 运动曲线。属性值可以是： + - `linear` 线性 + - `ease` 减速 + - `ease-in` 加速 + - `ease-out` 减速 + - `ease-in-out` 先加速后减速 + +- `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。 + +``` +上面这四个属性也可以写成综合属性： + transition：all 3s linear 0s + transition：让哪些属性进行过渡 过渡的持续时间 运动曲线 延迟时间 +``` + +## 2D转换 +**转换**是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。 + +转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。 + +在 CSS3 当中，通过 `transform` 转换来实现 2D 转换或者 3D 转换。 + +- 2D转换包括：缩放、移动、旋转 +### 缩放：scale +格式： +``` +transform：scale（x,y） +transform: scale(2,0.5) +参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 +取值：大于1表示放大，小于1表示缩小。不能为百分比 +``` +### 位移：translate +格式： +``` +transform: translate(水平位移, 垂直位移); +transform: translate(-50%, -50%); +- 参数解释：参数为百分比，相对于自身移动。 +- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。 +``` +### 旋转：rotate +格式： +``` +transform: rotate(角度); +transform: rotate(45deg); +参数解释：正值 顺时针；负值：逆时针。 +``` \ No newline at end of file -- Gitee