meta name="theme-color" 的动画答案

【问题标题】：Animation of meta name="theme-color"meta name="theme-color" 的动画
【发布时间】：2020-12-26 05:40:57
【问题描述】：

我想在<meta name="theme-color" content="..."> 中使用由多种颜色组成的动画例如：#87CEFA、#1E90FF、#4169E1...

是否可以在 Android 上的 Chrome 中为 theme-color 设置动画？

【问题讨论】：

标签： javascript jquery animation meta-tags

【解决方案1】：

最后我用下面的 JavaScript 代码找到了解决这个问题的方法。使用此代码，浏览器 URL 栏上的 3 种主题颜色会动态变化。

var themeColorTest = new function() {
  function e() {
    "#87CEFA" === $themeColor.content ? $themeColor.content = "#1E90FF" : "#1E90FF" === $themeColor.content ? $themeColor.content = "#4169E1" : $themeColor.content = "#87CEFA",
      setTimeout(e, 500)
  }
  this.init = function() {
    $themeColor = document.querySelector("meta[name='theme-color']"),
      e()
  }
};
themeColorTest.init();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Animation of meta name theme-color</title>
  <meta name="theme-color" content="#87CEFA" />
</head>

<body>
  <p>More info on the <code>theme-color</code> meta tag is at this <a href="https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android?hl=en">Google Developers Blog Post</a>.</p>
</body>

</html>

【讨论】：