元名称为"theme-color"的动画. [英] Animation of meta name="theme-color"

查看:41
本文介绍了元名称为"theme-color"的动画.的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想使用由几种颜色组成的动画,以< meta name ="theme-color"content =" ..."> 例如:#87CEFA,#1E90FF,#4169E1 ...

I want to use an animation consisting of several colors, in <meta name="theme-color" content="..."> eg: #87CEFA , #1E90FF , #4169E1...

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

Is it possible to animate the theme-color in Chrome on Android?

推荐答案

最后,我找到了使用以下JavaScript代码解决此问题的方法.使用此代码,浏览器URL栏上的3种主题颜色会动态更改.

Finally I found a solution to this problem with the following JavaScript code. With this code, 3 theme-colors on browser's URL bar change dynamically.

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>

这篇关于元名称为"theme-color"的动画.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆