小编Mar*_*ick的帖子

我正在尝试以一种非常特殊的方式排列字体真棒动画齿轮（如下图所示）

我创造了一个我似乎能够得到的最接近的小提琴。小提琴在这里https://jsfiddle.net/rke45798/13/

.slow-ani {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

.fa-small {
  font-size: 84px;
}

.fa-med {
  font-size: 70px;
}

.fa-lge {
  font-size: 48px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >
<div class="cogs">
  <i class="fas fa-cog fa-small slow-ani"></i>
  <br>
  <i class="fas fa-cog fa-med slow-ani"></i>
  <i class="fas fa-cog fa-lge slow-ani"></i>
</div>

我在上图中显示的安排是否可以实现？如果是这样，是否有任何可以应用的 CSS 技巧？

我创建了一个导航和标题部分，当用户向下滚动页面时，它们都会改变颜色（以及英雄文本），链接到下面的小提琴：

https://jsfiddle.net/mfen723/9swhejo5/35/

我需要选择用于导航栏切换器的所有三个图标栏，这样它们也会随着导航、英雄背景和文本而改变颜色，但我似乎无法选择所有 3 个图标栏。

我目前正在使用下面的函数，但我知道使用 document.querySelector 仅选择第一个匹配元素

  const heroIconBarScroll = document.querySelector('.icon-bar.bar-top', '.icon-bar-bar-middle', '.icon.bar-bottom');

            window.addEventListener('scroll', () => {
                if (window.scrollY >= 46) {
                    heroIconBarScroll.classList.add('hero-icon-bar-scroll');
                } else if (window.scrollY < 56)
                    heroIconBarScroll.classList.remove('hero-icon-bar-scroll');
            });

我尝试过使用 document.querySelectorAll 但这似乎没有选择任何图标栏。

任何建议表示赞赏。