diff --git "a/\351\203\221\347\242\247\344\273\231/2024-10-25\350\277\207\346\270\2412D\344\274\252\345\205\203\347\264\240.md" "b/\351\203\221\347\242\247\344\273\231/2024-10-25\350\277\207\346\270\2412D\344\274\252\345\205\203\347\264\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..6ae2515e421e5d8ccf833f163b0953f7b56e9b20 --- /dev/null +++ "b/\351\203\221\347\242\247\344\273\231/2024-10-25\350\277\207\346\270\2412D\344\274\252\345\205\203\347\264\240.md" @@ -0,0 +1,416 @@ +## 效果图 +[手机电视](http://zhengmuyun.cn/手机电视.mp4) +[旋转](http://zhengmuyun.cn/旋转.mp4) +[火箭](http://zhengmuyun.cn/火箭.mp4) +[扑克牌](http://zhengmuyun.cn/扑克牌.mp4) +[正反面](http://zhengmuyun.cn/正反面.mp4) +### 重要代码 +```html + .bo{ + height: 300px; + width: 800px; + background-color: white; + position: absolute; + left: 50%; + top:50%; + transform: translate(-50%,-50%); + transition: all 1s linear 0s; + } + .bo:hover{ + background-color: gainsboro; + } + .o1{ + height: 280px; + width: 240px; + background-color: white; + position: relative; + float: left; + overflow: hidden; + margin: 10px 10px 20px 10px; + } + .n1{ + height: 80px; + width: 100%; + position: absolute; + top:264px; + transition: all 1s; + background-color: orange; + } + .o1:hover{ + transform: translateY(-5px); + box-shadow: 0px 0px 15px gray; + } + .o1:hover .n1 { + transform: translateY(-60px); + } +----------------------------------------------- + div{ + height: 200px; + width: 200px; + background-color: red; + color: white; + font-size: 50px; + margin: 60px auto; + /* 过渡 */ + transition: all 1s ease-in-out 0s ; + } + div:hover{ + /* 旋转 */ + transform:rotate(-400deg); + } +----------------------------------------------- + div{ + height: 600px; + width: 600px; + margin: 0 auto; + background-color: orange; + } + img{ + color: white; + } + + .i{ + height: 200px; + position: absolute; + top:300px; + left:200px ; + overflow: hidden; + transform:translate(-50px ,200px)rotate(45deg); + transition: all 1s linear ; + + } + body:hover .i{ + transform:translate(740px,-460px) rotate(45deg); + } +------------------------------------------------------ + .o1{ + position: relative; + height: 500px; + width: 600px; + + } + img{ + height: 400px; + width: 300px; + /* 子绝父相 是图片层叠 */ + position: absolute; + left: 400px; + top: 100px; + /* 转换中心点 transform-origin: 水平方向 垂直方向; */ + transform-origin: center bottom; + transition: all 1s ease-in-out 0s; + /* 阴影程度 */ + box-shadow: 0px 0px 5px gray; + } + .o1:hover :nth-child(1){ + transform: rotate(-60deg); + } + .o1:hover :nth-child(2){ + transform: rotate(-50deg); + } + .o1:hover :nth-child(3){ + transform: rotate(-40deg); + } + .o1:hover :nth-child(4){ + transform: rotate(-30deg); + } + .o1:hover :nth-child(5){ + transform: rotate(-20deg); + } + .o1:hover :nth-child(6){ + transform: rotate(-10deg); + } + .o1:hover :nth-child(7){ + transform: rotate(0deg); + } + .o1:hover :nth-child(8){ + transform: rotate(10deg); + } + .o1:hover :nth-child(9){ + transform: rotate(20deg); + } + .o1:hover :nth-child(10){ + transform: rotate(30deg); + } + .o1:hover :nth-child(11){ + transform: rotate(40deg); + } + .o1:hover :nth-child(12){ + transform: rotate(50deg); + } + .o1:hover :nth-child(13){ + transform: rotate(60deg); + } +-------------------------------------------- + .o1{ + width: 100%; + height: 400px; + background-color: skyblue; + position: relative; + } + .o2,.o3{ + height: 301px; + width: 300px; + margin: 0 auto; + border-radius: 100%; + position: absolute; + left: 400px; + top: 30px; + transition: all 1s linear 0s; + /* 元素的背面不显示 */ + backface-visibility: hidden; + } + .o2{ + background-image: url(./image/1分钱.png); + background-repeat: no-repeat; + background-position: 0 -1px; + transform: rotateY(0deg); + } + .o3{ + background-image: url(./image/1分钱.png); + background-repeat: no-repeat; + background-position: -305px -1px; + transform: rotateY(180deg); + } + .o1:hover .o2{ + transform: rotateY(180deg); + } + .o1:hover .o3{ + transform: rotateY(0deg); + } +``` +## 结构伪类选择器 +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。 + +```html + +``` + +上方代码中： + +- 如果选择器写成`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。 + + +3. 格式： + +- `E:empty` 匹配没有任何子节点（包括空格等text节点）的元素E。 + +- `E:target` 匹配相关URL指向的E元素。要配合锚点使用。 +## 伪元素选择器 +1. 格式： + +- `E::before` 设置在元素E 前面（依据对象树的逻辑结构）的内容，配合`content`属性一起使用。 + +- `E::after` 设置在元素E 后面（依据对象树的逻辑结构）的内容，配合`content`属性一起使用。 +2. 格式： + +- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。 + +- `E::first-line` 设置元素 E 里面的**第一行**的样式。 + +- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。 + +## 文本 +1. text-shadow：设置文本的阴影 + +```html + text-shadow: 水平位移 垂直位移 模糊程度 阴影颜色; + 例： .o1{ + color: gray; + font-size: 100px; + /* 使字体呈现出凸起的感觉 */ + text-shadow: -1px -1px 1px wheat ,1px 1px 1px black; + } + .o2{ + color: gray; + font-size: 100px; + /* 使字体呈现出凹起的感觉 */ + text-shadow:1px 1px 1px #fff , -1px -1px 1px #000 ; + } +``` +## 盒模型中的 box-sizing 属性 + +这就需要用到 `box-sizing`属性。它的属性值可以是：`content-box`、`border-box`。 + +**外加模式：**（css的默认方式） + +```html + box-sizing: content-box; +``` + +此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`，而是盒子的总宽高发生变化。 + + +**内减模式：**【需要注意】 + +```html + box-sizing: border-box; +``` + + +此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。盒子的总宽高不变。 + +## 边框 +### 边框圆角：`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; +``` +### 边框阴影 +```html + box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 + + box-shadow: 15px 21px 48px -2px #666; + 后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。 + box-shadow:3px 3px 3px 3px #666 inset; +``` +- 水平偏移：正值向右 负值向左。 + +- 垂直偏移：正值向下 负值向上。 + +- 模糊程度：不能为负值。 +### 边框图片 +```html + /* 边框图片的路径*/ + border-image-source: url("images/border.png"); + + /* 图片边框的裁剪*/ + border-image-slice: 27; + + /*图片边框的宽度*/ + border-image-width: 27px; + + /*边框图片的平铺*/ + /* repeat :正常平铺 但是可能会显示不完整*/ + /*round: 平铺 但是保证 图片完整*/ + /*stretch: 拉伸显示*/ + border-image-repeat: stretch; +``` +## 过渡 +`transition`的中文含义是**过渡**。过渡是CSS3中具有颠覆性的一个特征，可以实现元素**不同状态间的平滑过渡**（补间动画），经常用来制作动画效果。 +transition 包括以下属性： + +- `transition-property: all;` 如果希望所有的属性都发生过渡，就使用all。 + +- `transition-duration: 1s;` 过渡的持续时间。 + +- `transition-timing-function: linear;` 运动曲线。属性值可以是： + - `linear` 线性 + - `ease` 减速 + - `ease-in` 加速 + - `ease-out` 减速 + - `ease-in-out` 先加速后减速 + +- `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。 + +上面的四个属性也可以写成**综合属性**： + +```javascript + transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; + + transition: all 3s linear 0s; +``` +## 2D 转换 +**转换**是 CSS3 中具有颠覆性的一个特征，可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。 +2D转换包括：缩放、移动、旋转。 + +1. 缩放（scale） + +```javascript + transform: scale(x, y); + + transform: scale(2, 0.5); +``` + +参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 + +取值：大于1表示放大，小于1表示缩小。不能为百分比。 + +2. 位移(translate) +```html + transform: translate(水平位移, 垂直位移); + + transform: translate(-50%, -50%); +``` +参数解释： + +- 参数为百分比，相对于自身移动。 + +- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。 + +3. 旋转(rotate) + +```html + transform: rotate(角度); + + transform: rotate(45deg); +``` + +参数解释：正值 顺时针；负值：逆时针。 +