如何直接在 chrome 检查器中创建和附加 CSS3 动画？

Posted 2023-03-06

【中文标题】如何直接在 chrome 检查器中创建和附加 CSS3 动画？

【英文标题】：How do I create and attach a CSS3 animation directly in chrome inspector?

【发布时间】：2013-09-10 15:06:33

【问题描述】：

我知道您可以直接从检查器中附加悬停事件，但是如何直接在检查器中创建和附加 CSS3 动画？

例如，如果我尝试使用检查器创建类似以下动画的内容：

@-webkit-keyframes test
   0%background:red
   100%background:blue   

浏览器将停止在“background”和“red”之间的第一个冒号(:)之后注册代码。

【参考方案1】：

您可以直接在css代码中进行编辑。

在检查器中选择元素 点击目标 css（匹配的 css 规则上方的文件，并在“匹配的 css 规则”标题下方） 进行修改

如果要选择css文件：

转到“资源”选项卡 框架 >（框架名称）> 样式表 > nameofthecssfile.css

最后，如果您没有 CSS 文件，您可以使用

将代码放入 html

右键单击正文（或任何其他 html 标记），选择编辑为 HTML

在标签外面放上你的自定义样式，比如：

@-webkit-keyframes 测试 0%背景：红色 100%背景：蓝色 定理 正文>