如何在animate.css中制作更改颜色的动画

Question

我正在观看animate.css网页，我想在主页的animate.css标题中制作变色动画，我该怎么做？

https://daneden.github.io/animate.css/

Answer 1

使用Web检查器查找（右键单击并选择检查元素）。

他们有一个带有以下样式定义的h1：

h1.site__title {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;.
    -webkit-animation: hue 60s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

Answer 2

试一试

＆＃13;

＆＃13;

h1 {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: colored 10s infinite linear;
  background-image: -webkit-linear-gradient(90deg, #f35626, #feab3a);
}
@-webkit-keyframes colored {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

＆＃13;

<h1>Colored text</h1>

＆＃13;

＆＃13;

＆＃13;