Hello! 欢迎来到小浪资源网!


CSS:@starting-style 一个新的、很酷的 at-rule


avatar
huhansan 2024-11-28 7

@starting-style css at-rule 用于定义元素上设置的属性的起始值,当元素接收到其第一次样式更新时,即当元素首次显示在先前加载的样式上时,您要从该元素进行转换页。

我们以 toast 消息为例。为了向用户显示它,我们将更改它的可见性,但结果将是它立即出现。现在我们可以使用新的 @starting-style 规则来定义该元素的起始动画

一些简单的例子

让我们使用这个基线 html,一个简单的矩形:

.container {   width: 10rem;   height: 10rem;   background-color: hotpink;   } 

添加从蓝色到粉色的初始背景颜色过渡

.container {   ...   transition: background-color 4s;  }  @starting-style {   .container {     background-color: blue;   } } 

CSS:@starting-style 一个新的、很酷的 at-rule

在前面的示例中添加旋转

.container {   ...   transition: transform 4s, background-color 4s;   transform: rotate(0deg);}  }  @starting-style {   .container {     background-color: blue;     transform: rotate(360deg);   } } 

CSS:@starting-style 一个新的、很酷的 at-rule

无论如何,你明白了。
为您的弹出窗口和菜单设置动画或创建动画徽标,
很简单。

笔记

此功能目前可用性有限。

相关阅读