如何通过检查元素添加@keyframes 规则？答案

【问题标题】：How to add @keyframes rule through inspect element?如何通过检查元素添加@keyframes 规则？
【发布时间】：2020-09-17 15:22:45
【问题描述】：

我经常喜欢通过检查元素自定义我经常使用的网页，以使我更满意，但是，我一直未能在 css 中添加@keyframes 规则。每次我单击“新样式规则”并输入我的代码时，它都会消失。

  0%{
    text-shadow: 0 0px 15px #f0f;
  }
  33%{
    text-shadow:0 0px 15px #0ff;
  }
  66%{
    text-shadow: 0 0px 10px #0f0;
  }
  100%{
    text-shadow: 0 0px 10px #ff0;
  }
}

我注意到在其他使用关键帧的网站中，它们与常规类分开，我无法通过检查元素与它进行任何交互。 @keyframe in inspect element

单独通过inspect元素添加关键帧是不可能的吗？

【问题讨论】：

标签： css keyframe web-inspector inspect-element

【解决方案1】：

有一些 chrome 扩展有助于页面 css 编辑，例如 amino。

或者，您可以直接在Sources 选项卡处处理 css 文件。

在Sources 选项卡上，您可以提供所有内容文件，包括 css 文件。 css 文件将显示为紫色。很可能它已被压缩，但您可以使用左下角的{} 按钮进行漂亮的打印。在那里，您可以随意编辑它，进行测试，然后查看转换为页面布局的内容。

【讨论】：