css定位+动画

ggbondmaker
1,279 阅读4分钟

div 的分层

postion:static (默认值 无作用)

默认值，呆在文档流里 无作用

postion:sticky (大部分不兼容)

移动到后，变成 fixed 效果

position:relative

使用场景

  • 用于做位移(很少用)
  • 给 absolute 做爸爸 配合 z-index
  • z-index:auto 默认值，不创建新的层叠上下文
  • z-index:-1/0/1/2

position:absolute

使用场景

  • 脱离原来的位置，另起一层，比如对话框的关闭按钮
  • 鼠标按钮提示 配合 z-index 经验
  • 相对于祖先元素不是 static 的定位 非仅 relative
  • 某些浏览器不写top/left 位置会错乱
  • 善用 left:100%
  • 善用 left:50%；加负 margin(居中)+transform:tranlatex(-50%)

position:fixed 视口定位

使用场景

  • 烦人的广告
  • 回到顶部按钮 配合 z-index
  • 手机上尽量不要用这个属性，坑很多
  • 不信搜一下[移动端 fixed]

层叠上下文

z-index:10 不一定高于 z-index:5 比喻

  • 每个层叠上下文就是一个作用域
  • 作用域里的 z-index 跟外界无关
  • 作用域内的才能比较 哪些不正交的属性可以创建它
  • MDN 文档有写
  • 需要记忆的有 z-index:0/flex/opacity/transform
  1. 文档根元素（）；
  2. position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
  3. position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
  4. flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
  5. grid (grid) 容器的子元素，且 z-index 值不为 auto；
  6. opacity 属性值小于 1 的元素（参见 the specification for opacity）；

清除定时器

var id = setInterval(() => {
    if( n <= 200 ){
        demo.style.left = n +'px'   
        n = n+1
}else{
    clearInterval(id)
}
},1000/60)

页面查看渲染 rendering ->paint flashing

浏览器渲染过程

步骤

  1. 根据 HTML 构建 HTML 树(DOM)
  2. 根据 CSS 构建 CSS 树(CSSOM)
  3. 将两棵树合并成一颗渲染树(render tree)
  4. Layout 布局(文档流、盒模型、计算大小和位置)
  5. Paint 绘制(把边框颜色、文字颜色、阴影等画出来)
  6. Compose 合成(根据层叠关系展示画面)

三种更新方式

  1. 第一种，全走
  • div.remove()会触发当前小时，其他元素 relayout
  1. 第二种，跳过 layout
  • 改变背景颜色，直接 repaint+composite
  1. 第三种，跳过 layout 和 paint
  • 改变 transform，只需 composite

查看 css 属性更新方式

csstriggers.com/

css 动画优化

JS 优化

  • 使用 requestAnimatuibFrame 代替 setTimeout 或 setInterval CSS 优化
  • 使用 will-change 或 translate
  • 🥬🐔用 left 做动画 应用 translate 参考文章
  • developers.google.com/web/fundame…

transform 变形

四个常用功能

  • 位移 translate
  • 缩放 scale
  • 旋转 rotate
  • 倾斜 skew 经验
  • 一般都需要配合 transition 过渡
  • inline 元素不支持 transform，先要变成 block

transform 之 translate

常用写法

  • translateX()
  • translateY()
  • translateZ()且父容器 perspective
  • translate(x,y)
  • translate3d(x,y,z) 经验 -绝对定位元素的居中
left:50%
top:50%
transform:translate(-50%,-50%)

transform 之 scale 缩放

常用写法

  • scaleX()
  • scaleY()
  • scale(x,y) 经验
  • 用的比较少，因为容易出现模糊

transform 之 rotate 旋转

常用写法

  • rotate([|]) 45deg
  • rotateZ([|])
  • rotateX([|])
  • rotateY([|])
  • rotate3d 太复杂 经验
  • 一般用于 360 度旋转制作 loading
  • 用到时在搜索 rotate MDN 看文档

transform 之 skew 倾斜

常用写法

  • skewX(| )
  • skewY(| )
  • skew(x,y) 经验
  • 用的比较少

# transform 多重效果

组合使用

  • transform:scale(0.5) translate(-100%,-100%)
  • transform:none 取消所有

transition 过渡

作用

  • 补充中间帧 语法
  • transition:属性名 时长 过渡方式 延时
  • transition:left 2s linear
  • 可以用逗号分隔两个不同属性
  • 可以用 all 代表所有属性
  • transition:all 2s
  • 过渡方式有:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps ,具体含义要靠数学知识 注意
  • 并不是所有属性都能过渡
  • display:none =>block 没法过渡
  • 一般改成 visibility:hidden =>visible
  • display 和 visibility 的区别 display 不占据原位置
  • background 可以过渡
  • opacity 透明度可以过渡 一般不用
  • 过渡必须要有起始 一般只有一次动画，或者两次，比如 hover 和非 hover 状态的过渡

animation

  1. 声明关键帧
  2. 添加动画
#demo.start{
    animation: xxx 1.5s ease 1s infinite alternate forwards 
}
/*还有一种是 from/to 对应 0%/100%*/
@keyframes xxx{
    0%{
        transform:none;
    }
66.55%{
    transform:translateX(200px);
}
100%{
    transform:translateX(200px) , translateY(100px);
}
}

##缩写语法 animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名

  • 时长:s 或者 ms
  • 过渡方式:和 transition 取值一样，如 linear
  • 次数:3 或者 2.4 或者 infinite
  • 方向:reverse|alternate|alternate-reverse
  • 填充模式:none|forwards|backwards|both
  • 是否暂停:paused|running
  • 以上所有属性都有对应的单独属性
avatar
文章
阅读
粉丝