css - 如何通过检查元素添加@keyframes 规则？

Question

我一直喜欢通过 inspect element 自定义我经常使用的网页，让我更满意，但是，我一直无法将 @keyframes 规则添加到 css。每次我点击“新样式规则”并输入我的代码时，它就会消失。

  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 element是不是不能添加关键帧？

Answer 1

有一些 chrome 扩展可以帮助编辑页面 css，比如 amino .

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

在 Sources 选项卡中，您可以提供所有内容文件，包括 css 文件。 css 文件将是紫色的。它很可能是压缩的，但您可以使用左下角的 {} 按钮进行 pretty-print 。到达那里后，您可以随心所欲地对其进行编辑、进行测试，然后查看翻译成页面布局的情况。