• 【web前端】css3（下）

    CSS3新增

    「1. CSS3属性选择器」

    1.   button {
    2.     cursor: pointer;
    3.   }
    4.   button[disabled] {
    5.     cursor: default;
    6.   }
    1.   input[type=search] {
    2.     color: skyblue;
    3.   }
    4.  
    5.   span[class^=black] {
    6.     color: lightgreen;
    7.   }
    8.  
    9.   span[class$=black] {
    10.     color: lightsalmon;
    11.   }
    12.  
    13.   span[class*=black] {
    14.     color: lightseagreen;
    15.   }

    「2. 结构伪类选择器」

    1. ul li:first-child {
    2.   background-color: lightseagreen;
    3. }
    4.  
    5. ul li:last-child {
    6.   background-color: lightcoral;
    7. }
    8.  
    9. ul li:nth-child(3) {
    10.   background-color: aqua;
    11. }

    • nth-child(n)参数n详解

      • 注意：本质上就是选中第几个子元素

      • n 可以是数字、关键字、公式

      • n 如果是数字，就是选中第几个

      • 常见的关键字有 even 偶数、odd 奇数

      • 常见的公式如下(如果 n 是公式，则从 0 开始计算)

      • 但是第 0 个元素或者超出了元素的个数会被忽略

    1. <style>
    2.   /* 偶数 */
    3.   ul li:nth-child(even) {
    4.     background-color: aquamarine;
    5.   }
    6.  
    7.   /* 奇数 */
    8.   ul li:nth-child(odd) {
    9.     background-color: blueviolet;
    10.   }
    11.  
    12.   /*n 是公式，从 0 开始计算 */
    13.   ul li:nth-child(n) {
    14.     background-color: lightcoral;
    15.   }
    16.  
    17.   /* 偶数 */
    18.   ul li:nth-child(2n) {
    19.     background-color: lightskyblue;
    20.   }
    21.  
    22.   /* 奇数 */
    23.   ul li:nth-child(2n + 1) {
    24.     background-color: lightsalmon;
    25.   }
    26.  
    27.   /* 选择第 0 5 10 15, 应该怎么选 */
    28.   ul li:nth-child(5n) {
    29.     background-color: orangered;
    30.   }
    31.  
    32.   /* n + 5 就是从第5个开始往后选择 */
    33.   ul li:nth-child(n + 5) {
    34.     background-color: peru;
    35.   }
    36.  
    37.   /* -n + 5 前五个 */
    38.   ul li:nth-child(-n + 5) {
    39.     background-color: tan;
    40.   }
    41. </style>

    • nth-child与nth-of-type区别

      • nth-child  选择父元素里面的第几个子元素，不管是第几个类型

      • nth-of-type  选择指定类型的元素

    1. <style>
    2.   div :nth-child(1) {
    3.     background-color: lightblue;
    4.   }
    5.  
    6.   div :nth-child(2) {
    7.     background-color: lightpink;
    8.   }
    9.  
    10.   div span:nth-of-type(2) {
    11.     background-color: lightseagreen;
    12.   }
    13.  
    14.   div span:nth-of-type(3) {
    15.     background-color: #fff;
    16.   }
    17. style>

    「3. 伪元素选择器」

    • 伪元素选择器注意事项

      • before 和 after 必须有 content 属性

      • before 在内容前面，after 在内容后面

      • before 和 after 创建的是一个元素，但是属于行内元素

      • 创建出来的元素在 Dom 中查找不到，所以称为伪元素

      • 伪元素和标签选择器一样，权重为 1

    1. <style>
    2.     div {
    3.       width: 100px;
    4.       height: 100px;
    5.       border: 1px solid lightcoral;
    6.     }
    7.  
    8.     div::after,
    9.     div::before {
    10.       width: 20px;
    11.       height: 50px;
    12.       text-align: center;
    13.       display: inline-block;
    14.     }
    15.     div::after {
    16.       content: '德';
    17.       background-color: lightskyblue;
    18.     }
    19.  
    20.     div::before {
    21.       content: '道';
    22.       background-color: mediumaquamarine;
    23.     }
    24.   style>

    伪元素字体图标

    1. p {
    2.    position: relative;
    3.    width: 220px;
    4.    height: 22px;
    5.    border: 1px solid lightseagreen;
    6.    margin: 60px;
    7.  
    8. }
    9. p::after {
    10.   content: '\ea50';
    11.   font-family: 'icomoon';
    12.   position: absolute;
    13.   top: -1px;
    14.   right: 10px;
    15. }

    「4. 2D 转换之translate」

    • 2D转换

      • 2D转换是改变标签在二维平面上的位置和形状

      • 移动：translate

      • 旋转：rotate

      • 缩放：scale

    • translate语法

      • x就是X轴上水平移动

      • y就是y轴上水平移动

    1.   transform: translate(x, y)
    2.   transform: translateX(n)
    3.   transfrom: translateY(n)  

    • 重点知识点

      • 2D的移动主要是指水平、垂直方向上的移动

      • translate最大的优点就是不影响其他元素的位置

      • translate中的100%单位，是相对于本身的宽度和高度来进行计算的

      • 行内标签没有效果

    1. div {
    2.   background-color: lightseagreen;
    3.   width: 200px;
    4.   height: 100px;
    5.   /* 平移 */
    6.   /* 水平垂直移动 100px */
    7.   /* transform: translate(100px, 100px); */
    8.  
    9.   /* 水平移动 100px */
    10.   /* transform: translate(100px, 0) */
    11.  
    12.   /* 垂直移动 100px */
    13.   /* transform: translate(0, 100px) */
    14.  
    15.   /* 水平移动 100px */
    16.   /* transform: translateX(100px); */
    17.  
    18.   /* 垂直移动 100px */
    19.   transform: translateY(100px);
    20.   /*百分比用法*/
    21.   transform: translateY(100%);   
    22. }

    让一个盒子水平垂直居中

    1. div {
    2.     position: relative;
    3.     width: 500px;
    4.     height: 500px;
    5.     background-color: pink;
    6.     /* 1. 我们tranlate里面的参数是可以用 % */
    7.     /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
    8.     /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
    9.     /* transform: translateX(50%); */
    10.     }
    11.         
    12. p {
    13.     position: absolute;
    14.     top: 50%;
    15.     left: 50%;
    16.     width: 200px;
    17.     height: 200px;
    18.     background-color: purple;
    19.     /1.* margin-top: -100px;
    20.     margin-left: -100px; */
    21.   
    22.     /2.* translate(-50%, -50%)  
    23.       盒子往上走自己高度的一半   */
    24.     transform: translate(-50%, -50%);
    25.   }
    26.         
    27. span {
    28.     /* translate 对于行内元素是无效的 */
    29.     transform: translate(300px, 300px);
    30.      }
    31.

    「5. 2D 转换之rotate」

    • rotate旋转

      • 2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转

    1. /* 单位是：deg */
    2. img:hover {
    3.   transform: rotate(360deg)
    4. }

    • rotate语法

      • rotate 里面跟度数，单位是 deg

      • 角度为正时，顺时针，角度为负时，逆时针

      • 默认旋转的中心点是元素的中心点

    • 设置元素旋转的中心的(transform-origin)

      transform-origin: x y;

    • 注意

      • 后面的参数 x 和 y 用空格隔开

      • x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center

      • 还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)

    「6. 2D 转换之scale」

    • scale的作用：用来控制元素的放大与缩小

    transform: scale(x, y)

    • 知识要点：

      • 注意，x与y之间用逗号进行分隔

      • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

      • transform: scale(2, 2): 宽和高都放大了二倍

      • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

      • transform:scale(0.5, 0.5): 缩小

      • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

    1.    div:hover {
    2.     /* 注意，数字是倍数的含义，所以不需要加单位 */
    3.     /* transform: scale(2, 2) */
    4.    
    5.     /* 实现等比缩放，同时修改宽与高 */
    6.     /* transform: scale(2) */
    7.    
    8.     /* 小于 1 就等于缩放*/
    9.     transform: scale(0.5, 0.5)
    10.    }

    「7. 2D 转换综合写法以及顺序问题」

    知识要点

    • 同时使用多个转换，其格式为 transform: translate() rotate() scale()

    • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

    • 当我们同时有位置或者其他属性的时候，要将位移放到最前面

    1. div:hover {
    2.   transform: translate(200px, 0) rotate(360deg) scale(1.2)
    3. }

    动画(animation)

    「动画」是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

    「动画的使用」

    1. 先定义动画

    2. 再调用定义好的动画

    1. /*1. 定义动画*/
    2. @keyframes 动画名称 {
    3.     0% {
    4.         width: 100px;
    5.     }
    6.     100% {
    7.         width: 200px
    8.     }
    9. }
    1. div {
    2.  /* 调用动画 */
    3.   animation-name: 动画名称;
    4.   /* 持续时间 */
    5.   animation-duration: 持续时间；
    6. }

    「动画序列」

    • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

    • 在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

    • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

    • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

    1. <style>
    2.     div {
    3.       width: 100px;
    4.       height: 100px;
    5.       background-color: aquamarine;
    6.       animation-name: move;
    7.       animation-duration: 0.5s;
    8.     }
    9.  
    10.     @keyframes move{
    11.       0% {
    12.         transform: translate(0px)
    13.       }
    14.       100% {
    15.         transform: translate(500px, 0)
    16.       }
    17.     }
    18.   style>

    「动画常见属性」

    1. div {
    2.   width: 100px;
    3.   height: 100px;
    4.   background-color: aquamarine;
    5.   /* 动画名称 */
    6.   animation-name: move;
    7.   /* 动画花费时长 */
    8.   animation-duration: 2s;
    9.   /* 动画速度曲线 */
    10.   animation-timing-function: ease-in-out;
    11.   /* 动画等待多长时间执行 */
    12.   animation-delay: 2s;
    13.   /* 规定动画播放次数 infinite: 无限循环 */
    14.   animation-iteration-count: infinite;
    15.   /* 是否逆行播放 */
    16.   animation-direction: alternate;
    17.   /* 动画结束之后的状态 */
    18.   animation-fill-mode: forwards;
    19. }
    20.  
    21. div:hover {
    22.   /* 规定动画是否暂停或者播放 */
    23.   animation-play-state: paused;
    24. }

    「动画简写方式」

    1. /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
    2. animation: name duration timing-function delay iteration-count direction fill-mode

    知识要点

    • 简写属性里面不包含 animation-paly-state

    • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

    • 要想动画走回来，而不是直接调回来：animation-direction: alternate

    • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

    animation: move 2s linear 1s infinite alternate forwards;

    「速度曲线细节」

    animation-timing-function: 规定动画的速度曲线，默认是ease

    1. /*打字机效果*/
    2. div {
    3.   width: 0px;
    4.   height: 50px;
    5.   line-height: 50px;
    6.   white-space: nowrap;
    7.   overflow: hidden;
    8.   background-color: aquamarine;
    9.   animation: move 4s steps(24) forwards;
    10. }
    11.  
    12. @keyframes move {
    13.   0% {
    14.     width: 0px;
    15.   }
    16.  
    17.   100% {
    18.     width: 480px;
    19.   }
    20. }

    CSS 过渡transition

    通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。

    深入理解CSS过渡transition
    https://www.cnblogs.com/xiaohuochai/p/5347930.html

    「定义」过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。

    1. transition-property: 过渡属性(默认值为all)
    2. transition-duration: 过渡持续时间(默认值为0s)
    3. transiton-timing-function: 过渡函数(默认值为ease函数)
    4. transition-delay: 过渡延迟时间(默认值为0s)
    1. .test{
    2.     height: 100px;
    3.     width: 100px;
    4.     background-color: pink;
    5.     transition-duration: 3s;
    6. /*     以下三值为默认值，稍后会详细介绍 */
    7.     transition-property: all;
    8.     transition-timing-function: ease;
    9.     transition-delay: 0s;
    10. }    
    11. .test:hover{
    12.     width: 500px;
    13. }
    14. ~~~html
    15. <div class="test"></div>

    「复合属性」过渡transition的这四个子属性只有是必需且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0s

    • 注意:

      • transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。

    1. .test{
    2.     height: 100px;
    3.     width: 100px;
    4.     background-color: pink;
    5. /*代表持续时间为2s，延迟时间为默认值0s*/
    6.     transition；2s;
    7. }    
    8. .test:hover{
    9.     width: 500px;
    10. }
    <div class="test"></div>

    延迟时间delay 案例

    1. .test{
    2.     height: 100px;
    3.     width: 100px;
    4.     background-color: pink;
    5.     /*代表持续时间为1s，延迟时间为2s*/
    6.     transition: 1s 2s;
    7. }    
    8. .test:hover{
    9.     width: 500px;
    10. }
    <div class="test"></div>

    「过渡属性」

    • 值: none | all | [,]

    • 初始值: all

    • 应用于: 所有元素

    • 继承性: 无

    1.   none: 没有指定任何样式
    2.   all: 默认值，表示指定元素所有支持transition-property属性的样式
    3.   property>: 可过渡的样式，可用逗号分开写多个样式

    「过渡持续时间」

    • 值:

    • 初始值: 0s

    • 应用于: 所有元素

    • 继承性: 无

    • [注意]该属性不能为负值

    • [注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位

    • [注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

    1. /*DEMO中的过渡属性值*/
    2. transition-property: width,background;

    「过渡时间函数」

    过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果

    • 值: [,]*

    • 初始值: ease

    • 应用于: 所有元素

    • 继承性: 无

    「取值」 过渡时间函数共三种取值，分别是关键字、steps函数和bezier函数

    「关键字」其实是bezier函数或steps函数的特殊值

    1. ease: 开始和结束慢，中间快。
    2. linear: 匀速。
    3. ease-in: 开始慢。
    4. ease-out: 结束慢。
    5. ease-in-out: 和ease类似，但比ease幅度大。

    3D转换

    认识3D转换

    「3D的特点」近大远小，物体和面遮挡不可见

    「三维坐标系」

    • x 轴：水平向右  -- 注意：x 轴右边是正值，左边是负值

    • y 轴：垂直向下  -- 注意：y 轴下面是正值，上面是负值

    • z 轴：垂直屏幕  --  注意：往外边的是正值，往里面的是负值

    3D转换

    1.  3D 转换知识要点

    • 3D 位移：translate3d(x, y, z)

    • 3D 旋转：rotate3d(x, y, z)

    • 透视 ：perspctive

    • 3D呈现 transfrom-style

    2.  3D 移动translate3d

    • 3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向

    • transform: translateX(100px)：仅仅是在 x 轴上移动

    • transform: translateY(100px)：仅仅是在 y 轴上移动

    • transform: translateZ(100px)：仅仅是在 z 轴上移动

    • transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离

    • 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

    1.   transform: translate3d(100px, 100px, 100px)
    2.   /* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
    3.   transform: translate3d(100px, 100px, 0)

    透视perspective

    • 知识点讲解

      • 如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)

      • 实际上模仿人类的视觉位置，可视为安排一只眼睛去看

      • 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离

      • 距离视觉点越近的在电脑平面成像越大，越远成像越小

      • 透视的单位是像素

    • 知识要点

      • 透视需要写在被视察元素的父盒子上面

      • 注意下方图片

      • d：就是视距，视距就是指人的眼睛到屏幕的距离

      • z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大

    代码演示

    1. body {
    2.   /*透视需要写在被视察元素的父盒子上面 */
    3.   perspective: 1000px;
    4. }

    translateZ与perspective的区别

    • perspecitve 给父级进行设置视距的，translateZ 给 子元素进行设置不同的大小

    3D 旋转rotateX

    3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

    • 语法：

      • transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度

      • transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度

      • transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度

      • transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度

    • 左手法则：

      • 左手的手拇指指向 x 轴的正方向

      • 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

    1. div {
    2.   /*透视写在被视察元素的父盒子上面 */
    3.   perspective: 300px;
    4. }
    5. /*被观察元素*/
    6. img {
    7.   display: block;
    8.   margin: 100px auto;
    9.   transition: all 1s;
    10. }
    11.  
    12. img:hover {
    13.   transform: rotateX(-45deg)
    14. }

    3D 旋转rotateY

    • 左手法则：

      • 左手的拇指指向 y 轴的正方向

      • 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

    1. div {
    2.   perspective: 500px;
    3. }
    4.  
    5. img {
    6.   display: block;
    7.   margin: 100px auto;
    8.   transition: all 1s;
    9. }
    10.  
    11. img:hover {
    12.   transform: rotateY(180deg)
    13. }

    3D 旋转rotateZ

    1. div {
    2.   perspective: 500px;
    3. }
    4.  
    5. img {
    6.   display: block;
    7.   margin: 100px auto;
    8.   transition: all 1s;
    9. }
    10.  
    11. img:hover {
    12.   transform: rotateZ(180deg)
    13. }

    「rotate3d」

    • transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度

    • x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度

      • transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg

      • transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

    1. div {
    2.   perspective: 500px;
    3. }
    4.  
    5. img {
    6.   display: block;
    7.   margin: 100px auto;
    8.   transition: all 1s;
    9. }
    10.  
    11. img:hover {
    12.   transform: rotate3d(1, 1, 0, 180deg)
    13. }

    3D呈现transform-style

    • 控制子元素是否开启三维立体环境

    • transform-style: flat  代表子元素不开启 3D 立体空间，默认的

    • transform-style: preserve-3d 子元素开启立体空间

    • 代码写给父级，但是影响的是子盒子

    1. <body>
    2.     <div class="box">
    3.         <div></div>
    4.         <div></div>
    5.     </div>
    6. </body>
    1. <style>
    2.     body {
    3.         perspective: 500px;
    4.         }
    5.         
    6.     .box {
    7.         position: relative;
    8.         width: 200px;
    9.         height: 200px;
    10.         margin: 100px auto;
    11.         transition: all 2s;
    12.         /* 让子元素保持3d立体空间环境 */
    13.         transform-style: preserve-3d;
    14.         }
    15.         
    16.     .box:hover {
    17.         transform: rotateY(60deg);
    18.     }
    19.         
    20.     .box div {
    21.         position: absolute;
    22.         top: 0;
    23.         left: 0;
    24.         width: 100%;
    25.         height: 100%;
    26.         background-color: pink;
    27.     }
    28.         
    29.     .box div:last-child {
    30.         background-color: purple;
    31.         transform: rotateX(60deg);
    32.     }
    33. style>
  • 相关阅读:
    C++ Standard Template Libaray(STL)迭代器演示源代码
    leetcode.494. 目标和
    智慧应管理信息化 平台建设方案
    Node+Vue3+mysql+ant design实现前后端分离——表格的添加、修改和删除
    2023最新SSM计算机毕业设计选题大全（附源码+LW）之java家教管理系统dpf3v
    C# BinaryFormatter序列化后的文件格式
    Linux输出转换命令 xargs
    从实时数据库转战时序数据库，他陪伴 TDengine 从 1.0 走到 3.0
    聚观早报 | 遥感AI大模型发布；拼多多启动11.11大促
    python查找算法_顺序查找
  • 原文地址：https://blog.csdn.net/m0_62336865/article/details/126797357