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

Question

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

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

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

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

Answer 1

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

1. 在检查器中选择元素
2. 单击目标 css（匹配的 css 规则上方的文件，并在“匹配的 css 规则”标题下方）
3. 做你的修改

如果要选择 css 文件：

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

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

1. 右键单击正文（或任何其他 html 标记），选择 Edit as HTML

2. 在标签之外放置您的自定义样式，例如：

   <风格>
   @-webkit-keyframes 测试{
       0%{背景：红色}
       100%{背景：蓝色}   
   }
   </style>
   <正文>
       定理
   </正文>