css实用属性(持续更新)

12/4/2022 css
.div{
  pointer-events: none; // 禁止点击,DOM不会触发点击事件
  animation: ani 3s steps(3); //  steps(n)控制动画帧到帧之间的步进,动画更平滑
  content-visibility: auto; // 非可视区的子元素不渲染(用于优化长列表渲染)
  contain-intrinsic-size: 200px; // 指定当前元素的预宽高,解决设置content-visibility之后滚动抽搐的问题
}
// 后续持续更新

// 精灵图转gif
.box{
  width 200px
  height 150px
  background url(xxx.png) no-repeat
  background-size 3000% 100% // 假设精灵图由30张图片构成
  animation ani 3s steps(29) infinite // 29 = 30 - 1
}
@keyframes ani{
  0%
    background-position 0 0
  100%
    background-position 100% 0
}

    爱自己,
    是终身浪漫的开始。
    红莲华
    x
    loading...