2024年CSS持续活跃，年终大盘点！

正文

请到「今天看啥」查看全文

@keyframes reveal {
0% ,
100% {
translate : 0 -25 % ;
scale : 0.7 ;
opacity : 0.2 ;
}
50% {
scale : 1 ;
translate : 0 ;
opacity : 1 ;
}
}

滚动捕捉事件

新增 scrollsnapchange 和 scrollsnapchanging 事件，使滚动捕捉过程中的关键时刻可见且可响应，结合使用可创建无缝的滚动选择体验。

 
scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

组件

锚点定位

CSS锚点定位允许开发者以一种声明式的方式创建元素之间的定位关系，特别适用于需要层级化布局的场景，如菜单、工具提示、下拉框、设置对话框等。

 
/* 定义按钮为锚点 */
.button-anchor {
  anchor-name: --menu-anchor;
}

/* 菜单定位到按钮的正上方 */
.menu {
  position: absolute;
  position-anchor: --menu-anchor;
  position-area: block-start;
}

请到「今天看啥」查看全文