我不知道如何最好地问这个问题。我是一个新手，所以如果有什么地方放得很笨拙或很明显，请耐心等待，请提前道歉。我会尽量说清楚的。我正在用Bootstrap 4.3.1、Django 4.0.1、Python 3.9.5开发一个简单的网站。事实上，我认为这些都与这个问题无关，然而，这个问题主要集中在我自己的样式表上。在这个网站上，我有一个使用以下css慢慢改变颜色的标志，我改编自"Hue Loaders"(我在codepen.io上找到的一个加载器UI-感谢Shivam Thaplival(：
.loader {
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
@keyframes hue{
0%{filter: hue-rotate(0deg);}
10%{filter: hue-rotate(30deg);}
90%{filter: hue-rotate(330deg);}
100%{filter: hue-rotate(360deg);}
}
现在，我希望导航栏上其他链接的悬停颜色与徽标颜色相同，无论当时是什么颜色。我试着应用同样的代码：
.font-nav:hover{
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
颜色变化是有效的，但问题是每当我开始悬停时，动画就会开始，所以颜色与徽标不同步。我想知道我是否可以以某种方式将悬停动画的时间与徽标动画联系起来。有什么建议吗？
更新：弄清楚我哪里错了。我没有为已经应用于我的徽标的动画添加相同的类调用，而是将css复制到了另一个类中。当我这样做的时候，它从一开始就开始动画，当我悬停在链接上时，但当类调用相同时，动画会在徽标和链接上同步。这是我最终得到的css：
.font-nav{
font-family: 'Oswald', sans-serif;
font-size: 1.5em;
color: #333333;
}
.font-nav:hover{
color: #ff9933;
}
#right-nb{
text-align: right;
}
/* COLOR CHANGER BELOW */
.loader {
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
@keyframes hue{
0%{filter: hue-rotate(0deg);}
10%{filter: hue-rotate(30deg);}
90%{filter: hue-rotate(330deg);}
100%{filter: hue-rotate(360deg);}
}
和html:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{% comment %} Bootstrap {% endcomment %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
{% comment %} Medium {% endcomment %}
<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
{% comment %} FontAwesome {% endcomment %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
{% comment %} Fonts {% endcomment %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
{% comment %} Custom CSS {% endcomment %}
<link rel="stylesheet" href="{% static 'css/blogstyle.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<ul class="nav navbar-nav" style="width: 40%;">
<li></li>
<li><a class="nav-link font-nav loader" href="{% url 'about' %}">About</a></li>
<li><a class="nav-link font-nav loader" href="https://www.github.com">Github</a></li>
<li><a class="nav-link font-nav loader" href="https://www.linkedin.com">LinkedIn</a></li>
</ul>
<div id="logo" >
<a class="navbar navbar-nav justify-content-center loader" style="width: 20%;" href="{% url 'post_list' %}"><img src="../../static/images/LASP_Logo_suppeq.png" alt="LASP Logo"></a>
</div>
<ul id="right-nb" class="nav navbar-nav justify-content-end" style="width: 40%;">
{% if user.is_authenticated %}
<li><a class="nav-link font-nav loader" href="{% url 'post_new' %}">New Post</a></li>
<li><a class="nav-link font-nav loader" href="{% url 'post_draft_list' %}">Drafts</a></li>
<li><a class="nav-link font-nav loader"a href="{% url 'logout' %}">Logout</a></li>
<li class="font-nav" style="font-size: 1em; color: #d3d3d3"><a>Logged in as: {{user.username }}</a></li>
{% else %}
<li><a class="nav justify-content-end" href="{% url 'login' %}"><i class="fas fa-sign-in-alt"></i></a></li>
{% endif %}
</ul>
</div>
</nav>
</body>
</html>
概念：
使用JavaScript查找徽标元素。为"添加事件侦听器；animationstart"；提供一个处理程序函数，该函数将：查找要设置动画的所有其他元素将类添加到要设置动画的其他元素中提供基于此类的动画样式。
<style>
.loader {
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
@keyframes hue{
0% {filter: hue-rotate(0deg);}
10% {filter: hue-rotate(30deg);}
90% {filter: hue-rotate(330deg);}
100% {filter: hue-rotate(360deg);}
}
.font-nav.anime {
filter:hue-rotate(0deg);
color:linear-gradient(45deg,#0f8,#08f);
animation:hue infinite linear;
animation-duration: 35s;
}
</style>
<script>
let logo = document.getElementById('logo');
logo.addEventListener("animationstart", function() {
let links = document.querySelectorAll('.font-nav');
let link;
for (var i=0; i<links.length; i++) {
link = links[i];
link.classList.add('anime');
}
}, false);
</script>
<body>
<div id="logo"><img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27"</div>
<a class="font-nav" href="#">A link</a>
<a class="font-nav" href="#">Another link</a>
</body>