Skip to content

Latest commit

 

History

History
228 lines (165 loc) · 5.72 KB

CSS3.md

File metadata and controls

228 lines (165 loc) · 5.72 KB
Raw

CSS3

选择器

属性选择器

input[type=search] {
  color: skyblue;
}

结构伪类选择器

nth-child 详解

  • n 可以是数字、关键字、公式
  • n 如果是数字，就是选中第几个
  • 常见的关键字有 even 偶数、odd 奇数
  • 常见的公式如下(如果 n 是公式，则从 0 开始计算)
  • 但如果是第 0 个元素或者超出了元素的个数会被忽略

nth-child 和 nt-of-type 的区别

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

伪元素选择器

  • ::before 在元素内部的前面插入内容
  • ::after 在元素内部的后面插入内容

注意事项

  • before 和 after 必须有 content 属性
  • before 在内容前面，after 在内容后面
  • before 和 after 创建的是一个元素，但是属于行内元素
  • 创建出来的元素在 Dom 中查找不到，所以称为伪元素
  • 伪元素和标签选择器一样，权重为 1

2D转换

2D转换translate

  • x 就是 x 轴上水平移动
  • y 就是 y 轴上水平移动
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
  • 2D 的移动主要是指 水平、垂直方向上的移动
  • translate 最大的优点就是不影响其他元素的位置
  • translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
  • 行内标签没有效果

2D旋转rotate

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

transform: rotate(度数)
  • rotate里面跟度数，单位是deg`
  • 角度为正时，顺时针，角度为负时，逆时针
  • 默认旋转的中心点是元素的中心点

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

transform-origin: x y;
  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
  • 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

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

综合写法

  • 同时使用多个转换，其格式为 transform: translate() rotate() scale()
  • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
  • 但我们同时有位置或者其他属性的时候，要将位移放到最前面

动画

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

  • 定义动画
@keyframes motion {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(1000px);
    }
}
  • 使用动画
div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    animation: motion 5s;
}
  • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
  • 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
  • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%
场景属性
div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;
}
  • 简写
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

3D转换

三维坐标系

202001170927

3D 移动 translate3d

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

透视 perspective

202001170939

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

body {
  perspective: 1000px;
}

3D 旋转rotate

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

transform: rotate3d(x, y, z, deg)
rotateY
rotateX
rotateZ
/* 沿着对角线旋转 */
transform: rotate3d(1, 1, 0, 180deg)

3D 呈现 transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style: flat 代表子元素不开启 3D 立体空间，默认的
  • transform-style: preserve-3d 子元素开启立体空间

浏览器私有前缀

  • 火狐-moz-
  • ie-ms-
  • -webkit-
  • -o-