From 34450556cb0d5b96b61937fc255f2aafa552ebe7 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 3 Nov 2024 15:31:34 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB=E8=AF=A6=E8=A7=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...50\347\224\273\350\257\246\350\247\243.md" | 232 ++++++++++++++++++ ...76\346\226\207\350\257\246\350\247\243.md" | 172 +++++++++++++ 2 files changed, 404 insertions(+) create mode 100644 "\345\220\264\351\221\253\351\270\277/20241025\345\212\250\347\224\273\350\257\246\350\247\243.md" create mode 100644 "\345\220\264\351\221\253\351\270\277/20241028\345\212\250\347\224\273\350\257\246\350\247\243\345\222\214flex\345\270\203\345\261\200\345\233\276\346\226\207\350\257\246\350\247\243.md" diff --git "a/\345\220\264\351\221\253\351\270\277/20241025\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/\345\220\264\351\221\253\351\270\277/20241025\345\212\250\347\224\273\350\257\246\350\247\243.md" new file mode 100644 index 0000000..8793a90 --- /dev/null +++ "b/\345\220\264\351\221\253\351\270\277/20241025\345\212\250\347\224\273\350\257\246\350\247\243.md" @@ -0,0 +1,232 @@ +### 结构伪类选择器 +伪类选择器的标志性符号是`:` + +CSS中有一些伪类选择器，如：link、:visited、:hover、:active、:focus + +**1.格式（重要）(第一部分):** +- E:first-child：匹配父元素的第一个子元素E +- E:last-child：匹配父元素的最后一个子元素E +- E:nth-child(n)：匹配父元素的第n个子元素E +- E:nth-child(odd)：匹配奇数 +- E:nth-child(even)：匹配偶数 +- E:nth-last-child(n)：匹配父元素的倒数第n个子元素E + +**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 + +**3.格式：（第三部分）** +- E:empty：匹配没有任何子节点（包括空格等text节点）的元素E +- E:target：匹配相关URL指向的E元素 +### 伪元素选择器 +伪元素选择器的标志性符号是`::` + +**1.格式：（第一部分）** +- E::before：设置在元素E前面（依据对象树的逻辑结构）的内容，配合content属性一起使用 +- E::after：设置在元素E后面（依据对象树的逻辑结构）的内容，配合content属性一起使用 + +**2.格式：（第二部分）** +- E::fist-letter：是指元素E里面的第一个字符的样式 +- E::fist-line：是指元素E里面的第一行的样式 +- E::selection：设置元素E里面被鼠标选中的区域的样式（一般设置颜色和背景色） +## 文本 +### text-shadow：设置文本的阴影 +**语法：**text-shadow：水平位移 垂直位移 模糊程度 阴影颜色 +### 盒模型中的box-sizing属性 +- 外加模式：（css的默认方式）box-sizing:content-box; + +注：此时设置的width和height是**内容区域**的宽高，盒子的实际宽度=设置的width+padding+border，此时改变padding和border的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化 + +- 内减模式：（注意）box-sizing:border-box; + +注：此时设置的width和height是**盒子**的总宽高，盒子的实际宽度=设置的width，此时改变padding和border的大小，会改变内容的宽高，盒子的总宽高不变 +### 边框 +边框的属性很多，其中**边框圆角**和*边框阴影**应用十分广泛 +### 边框圆角：border-radius属性 +边框的每个圆角，本质上是一个圆，圆有**水平半径**和**垂直半径**，如果二者相等，就是圆；如果二者不等，就是椭圆 +### 边框阴影：box-shadow属性 +语法：box-shadow:水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 + +注：后面加一个inset属性，表示内阴影，如果不写，则默认表示外阴影 + +## 过渡：transition +transition含义是过渡，可以实现元素**不同状态间的平滑过渡**（补间动画） + +transition包括以下属性： +- transition-property:all;如果希望所有的属性都发生过渡，就使用all +- transition-duration:ls;过渡的持续时间 +- transition-timing-function:linear;运动曲线，属性值可以是： + - linear 线性 + - ease 减速 + - ease-in 加速 + - ease-out 减速 + - ease-in-out 先加速后减速 +- transition-delay:1s;过渡延迟 +## 2D转换 +### 缩放：scale +格式：transform:scale(x,y); +### 位移：translate +格式：transform:translate(水平位移，垂直位移); +### 旋转：rotate +格式：transform:rotate(角度); + +注：rotate旋转时，默认是以盒子的正中心为坐标原点的，如果想改变旋转的坐标原点，可以用transform-origin属性，格式：transform-origin:水平坐标 垂直坐标 + +## 作业： +``` + 作业1： + +
+
+
+
+
+ + css： + *{ + margin: auto; + } + .d{ + height: 800px; + width: 320px; + background-color: #F5F5F5; + margin: 80px auto; + } + .dd{ + width: 230px; + height: 300px; + text-align: center; + margin-right: 20px; + background-color: #F5F5F5; + float: left; + position: relative; + top: 0; + overflow: hidden; + transition: all .5s; + } + .dd:hover{ + top:-5px; + box-shadow: -1px,-1px,15px,5px,black; + } + .dd .sp{ + position: absolute; + left: 0; + bottom: -80px; + width: 100%; + height: 80px; + background-color: #ff6700; + transition: all 999ms; + } + .dd:hover .sp{ + bottom: 0; + } + + 作业2： + +
遥遥领先
+ + css： + .d1{ + height: 200px; + width: 200px; + background-color: red; + margin: auto; + margin-top: 100px; + font-size: 30px; + color: white; + transition: all 3s; + + } + .d1:hover{ + transform: rotate(720deg); + } + 作业3： + +
+ + css： + .d1{ + height: 800px; + width: 800px; + background-color: orange; + margin: auto; + } + .rocket{ + padding-top: 450px; + transform:translate(-200px,200px) rotate(45deg); + margin-left: 200px; + transition: all 1s ease-in; + } + .rocket:hover{ + transform:translate(400px,-400px) rotate(45deg); + } + 作业4： + +
+ + + + + + + + + + + + + +
+ + css： + .d{ + width: 500px; + height: 800px; + margin: 100px auto; + position: relative; + } + img{ + width: 250px; + transition: all 2s; + transform-origin: center bottom; + position: absolute; + } + .d:hover img:nth-child(1){ + transform: rotate(-60deg); + } + .d:hover img:nth-child(2){ + transform: rotate(-50deg); + } + .d:hover img:nth-child(3){ + transform: rotate(-40deg); + } + .d:hover img:nth-child(4){ + transform: rotate(-30deg); + } + .d:hover img:nth-child(5){ + transform: rotate(-20deg); + } + .d:hover img:nth-child(6){ + transform: rotate(-10deg); + } + .d:hover img:nth-child(8){ + transform: rotate(10deg); + } + .d:hover img:nth-child(9){ + transform: rotate(20deg); + } + .d:hover img:nth-child(10){ + transform: rotate(30deg); + } + .d:hover img:nth-child(11){ + transform: rotate(40deg); + } + .d:hover img:nth-child(12){ + transform: rotate(50deg); + } + .d:hover img:nth-child(13){ + transform: rotate(60deg); + } +``` \ No newline at end of file diff --git "a/\345\220\264\351\221\253\351\270\277/20241028\345\212\250\347\224\273\350\257\246\350\247\243\345\222\214flex\345\270\203\345\261\200\345\233\276\346\226\207\350\257\246\350\247\243.md" "b/\345\220\264\351\221\253\351\270\277/20241028\345\212\250\347\224\273\350\257\246\350\247\243\345\222\214flex\345\270\203\345\261\200\345\233\276\346\226\207\350\257\246\350\247\243.md" new file mode 100644 index 0000000..4231473 --- /dev/null +++ "b/\345\220\264\351\221\253\351\270\277/20241028\345\212\250\347\224\273\350\257\246\350\247\243\345\222\214flex\345\270\203\345\261\200\345\233\276\346\226\207\350\257\246\350\247\243.md" @@ -0,0 +1,172 @@ +## 3D转换 +### 1.旋转：rotateX、rotateY、rotateZ +**格式**：transform:rotateX/Y/Z(旋转的度数) +### 2.移动：translatex、translateY、translateZ +**格式**：transform:translateX/Y/Z(移动的像素) +### 3.透视：perspective +**格式：** +- 作为一个属性，设置给父元素，作用于所有3D转换的子元素 +- 作为transform属性的一个值，作用于元素自身 +### 4.3D呈现(transform-style) +3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的**父元素**设置transform-style:preserve-3d来使其变成一个真正的3D图形 +## 动画 +### 1.定义动画的步骤 +(1)通过@keyframes定义动画 + +(2)将这段动画通过百分比，分割成多个节点，然后各节点中分别定义各属性 + +(3)在指定元素里，通过**animation**属性调用动画 + +语法：@keyframes 动画名{ + + from{ + 初始状态 + } + + to{ + 结束状态 + } + +} + +调用：animation:动画名称 持续时间; +### 动画属性 +animation属性格式：animation:定义的动画名称 持续时间 执行次数(infinite表示无限次) 是否反向 运动曲线 延迟执行 +- 动画名称：animation-name:名称; +- 执行一次动画的持续时间：animation-duration:时间; + +注：动画名称和持续时间是必选项，且顺序固定 +- 动画的执行次数：animation-iteration-count:次数; +- 动画的方向：animation-direction:方向;(normal正常,alternate反向) +- 动画延迟执行：animation-delay:延迟时间 +- 设置动画结束时，盒子的状态：animation-fill-mode:forwards;(forwards:保持动画结束后的状态(默认),backwards:动画结束后回到最初的状态) +- 运动曲线：animation-timing-function:(属性值可以是：linear ease-in-out steps()等); +## flex布局的优势 +**flex布局的子元素不会脱离文档流**，很好地遵从了"流的特性" + +**flex是一种现代的布局方式，是W3C第一次提供真正用于布局的CSS规范**，flex非常提供了丰富的属性，非常灵活，让布局的实现更加多元化，且方便易用 +## 弹性盒子、子元素 +- 弹性盒子：指的是使用display:flex或display:inline-flex声明的**父容器** +- 子元素/弹性元素：指的是父容器里面的子元素们(父容器被声明为flex盒子的情况下) +## 主轴和侧轴 +- 主轴：flex容器的主轴，默认是水平方向，从左到右 +- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上到下 +注：主轴和侧轴不是固定不变的，可以通过flex-direction更换方向 + +## 作业： +``` + 大鱼： + +
+
+
+ + css： + .sharkbox { + width: 174px; + height: 126px; + background: url(./fish.png) no-repeat; + animation: fish 1s steps(8) infinite,fishBox 20s; + } + + .shark{ + background-image: url(./shark2.png); + width: 509px; + height: 270px; + margin-top: 200px; + animation: move 1s steps(8) infinite,sharkBox 20s; + } + @keyframes fish { + from { + background-position: 0 0; + } + + to { + background-position: 0px -1008px; + } + } + + @keyframes fishBox { + 0% { + transform: translate(0, 0); + } + + 25% { + transform: translate(600px, 0px) rotate(90deg); + } + + 50% { + transform: translate(600px, 600px) rotate(180deg); + } + + 75% { + transform: translate(0px, 600px) rotate(270deg); + } + + 100% { + transform: translate(0px, 0px) rotate(360deg); + } + } + + @keyframes move{ + from{ + transform: translate(0px,0px); + } + to{ + background-position:left -2160px; + } + } + @keyframes shark { + from { + background-position: 0 0; + } + + to { + background-position: 0px -2160px; + } + } + + @keyframes sharkBox { + from { + transform: translate(0, 0); + } + + to { + transform: translate(500px, 0px); + } + } + 白熊： + +
+
+
+ + css： + .d1{ + width: 2000px; + height: 200px; + background-color: #6fd6f2; + } + .d2{ + width: 200px; + height: 100px; + background-image: url(./白熊.png); + animation: bear1 1s steps(8) infinite,bear2 8s ; + } + @keyframes bear1 { + from{ + background-position: 0 0; + } + to{ + background-position: -1600px 0; + } + } + @keyframes bear2 { + from{ + transform: translate(0,0); + } + to{ + transform: translate(1000px,0); + } + } +``` \ No newline at end of file -- Gitee