手册
目录
收藏500
分享
阅读1027
更新时间2025-07-16
CSS @starting-style 规则用于在元素获得其第一次样式更新之前定义元素的初始样式。
这可以用于为像弹出框、模态框或任何从 display: none 状态变为可见状态的元素创建平滑的进入和退出过渡效果。
使用 @starting-style让盒子以透明度 0 开始,并从顶部落下:
.box {
width: 150px;
height: 150px;
background-color: pink;
opacity: 1;
transition: all 0.9s ease;
@starting-style {
opacity: 0;
translate: 0 -80px;
}
}
运行实例 »点击 "运行实例" 按钮查看在线实例
在弹出框和对话框中使用 @starting-style:
#myPopover {
transition: opacity .5s ease-in, scale .5s ease-in;
@starting-style {
opacity: 0;
scale: 1.1;
}
}
#myDialog {
transition: opacity .5s ease-in, scale .5s ease-in;
@starting-style {
opacity: 0;
scale: 1.1;
}
}
运行实例 »点击 "运行实例" 按钮查看在线实例
@starting-style {
css 声明;
}
表格中的数字表示首个完全支持该 @ 规则的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 117 | 117 | 129 | 17.5 | 103 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习