Javascript 如何在文本输入到字段时设置页面背景动画

我正在尝试在我正在创建的网站上创建此效果：

有人知道如何实现这个动画吗

谢谢

---

斯蒂芬妮

只要检查一下网站的来源就可以了。就是这样做的

$(function () {
  $('input').focus().keyup(function () {
    $('body').addClass('strobo');
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(function () {
      $('body').removeClass('strobo');
    }, 200);
  });
});

CSS

---

欢迎来到SO。请看一看。您可能还需要检查、和以及如何创建。张贴您尝试过的代码和收到的错误。尽可能的具体，这将导致更好的答案。嗨，斯蒂芬妮，这是常见的误解如何使用。我们看看你自己解决的问题，然后看看在哪里可以修复或改进。重要的是，我们要看看您自己已经尝试过的内容。我正在寻找特定的CSS和javascript，它们需要实现，以便在用户键入时实现此动画。我也在使用squarespace来注入代码她不也需要strobo的样式吗$函数（）{$（'input'）.focus（）.keyup（函数（）{$（'body'）.addClass（'strobo'）；if（timeout）clearTimeout（timeout）；timeout=setTimeout（函数（）{$（'body'）。removeClass（'strobo'）；}，200）；}）；）。strob{background color:blue；}我在squarespace的注入代码部分添加了这个，它不工作了，我是不是遗漏了什么？我发现这是css：.strobo{animation:bgstrobe.2s steps（1，end）infinite}.strobo.mailing_u笔迹，.strobo.mailing_usubscribe，.strobo.mailing{animation:strobe.2s steps（1，end）infinite}.strobo.mailing_utextfield{animation:bgstrobe.2s steps（1，end）infinite}.strobo.mailing_utextfield input{animation:inputstrobetext.2s steps（1，end）infinite}@keyframes strobe{50%{-webkit filter:invert（100%）；filter:invert（100%）}@keyframes bgstrobe{50%{background background:？

.strob {
  background-color: blue;
}