CSS3进阶笔记--超详细--简洁易懂

CSS	地址
CSS基础笔记（一）	CSS笔记--超详细--零基础--简洁易懂（一）_ddddddyu的博客-CSDN博客
CSS基础笔记（二）	CSS笔记--超详细--零基础--简洁易懂（二）_ddddddyu的博客-CSDN博客
CSS基础笔记（三）	CSS笔记--超详细--零基础--简洁易懂（三）_ddddddyu的博客-CSDN博客
CSS3进阶笔记	CSS3进阶笔记--超详细--简洁易懂_ddddddyu的博客-CSDN博客

1 新增选择器

• 属性选择器
• 结构伪类选择器
• 伪元素选择器

属性选择器

根据元素属性选择，不借助类或id选择

结构伪类选择器

主要根据文档结构来选择元素，

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

nth-child(n)参数n详解

• n可以是数字，关键字和公式
• n如果是数字，就是选择第n个子元素，里面数字从1开始
• n可以是关键字：even 偶数，odd奇数
• n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

公式	取值
2n	偶数（等价于even）
2n+1	奇数（等价于odd）
5n	5 10 15 …（5的倍数）
n+5	从第5个开始（包含第五个）到最后
-n+5	前5个（包含第5个）

nth-child与nth-of-type区别

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

  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }

伪元素选择器

注意事项：

• before 和 after 必须有 content 属性

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

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

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

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

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }

2 新增2D转换

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

• 移动：translate

• 旋转：rotate

• 缩放：scale

2D 转换之 translate

  transform: translate(x, y)
  transform: translateX(n)
  transfrom: translateY(n) 

 注意点：

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

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

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

• 行内标签没有效果

让盒子水平垂直居中

div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 1. 我们tranlate里面的参数是可以用 % */
    /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
    /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
    /* transform: translateX(50%); */
}
        
p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /1.* margin-top: -100px;
    margin-left: -100px; */
  
    /2.* translate(-50%, -50%)  
      盒子往上走自己高度的一半   */
    transform: translate(-50%, -50%);
}
        
span {
    /* translate 对于行内元素是无效的 */
    transform: translate(300px, 300px);
}

2D 转换之 rotate

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

/* 单位是：deg */
img:hover {
  transform: rotate(360deg)
}

rotate语法：

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

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

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

设置旋转中心

/* xy可以是百分数，像素，方位词 */
transform-origin: x y;

2D 转换之 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 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

2D 转换综合写法以及顺序问题

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

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

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

3 新增动画(animation)

动画使用

• 先定义动画

• 再调用定义好的动画

/*1. 定义动画*/
@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
}

/*2. 使用动画*/
div {
 /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间；
}

动画序列

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

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

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

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

常见动画属性

动画属性简写

/* animation：动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态 */

animation: myfirst 5s linear 2s infinite alternate;

• 简写属性里面不包含 animation-play-state
• 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
• 想要动画走回来 ，而不是直接跳回来：animation-direction: alternate
• 盒子动画结束后，停在结束位置： animation-fill-mode : forwards

速度曲线animation-timing-function

规定动画的速度曲线，默认是ease

4 新增3D转换

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

3D知识点，相比2D多了z轴方向

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

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

• 透视 ：perspctive

• 3D呈现 transfrom-style

3D 移动translate3d

transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

透视perspective

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

知识要点：

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

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

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

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

translateZ与perspective的区别

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

• 有了透视，就能看到translateZ 引起的变化了

3D 旋转rotateX

语法
transform: rotateX(45deg)  -- 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg)  -- 沿着自定义轴旋转 45 deg 为角度

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

旋转方向是左手法则

3D呈现transform-style

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

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

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

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

5 新增过渡transition

过渡transition是一个复合属性，包含四个：

• transition-property: 过渡属性(默认值为all)
• transition-duration: 过渡持续时间(默认值为0s)
• transiton-timing-function: 过渡函数(默认值为ease函数)
• transition-delay: 过渡延迟时间(默认值为0s)

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
/*     以下三值为默认值，稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    
.test:hover{
    width: 500px;
}
~~~html
<div class="test"></div>

可以简写，用空格分开，持续时间属性是必须且不为0，其他可选

延迟默认0，property默认all，function默认ease

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

6 CSS3新增盒子模型

通过box-sizing来指定盒模型，有两个值：content-box、border-box

主要是改变计算盒子大小的，分为两种情况：

• box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
• box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding 和border不会超过width宽度）