JavaScript 旋转标题答案

【问题标题】：JavaScript Rotating TitleJavaScript 旋转标题
【发布时间】：2021-11-15 01:34:11
【问题描述】：

我正在使用的这个脚本为我正在构建的网站上的标题创建旋转文本效果。我想增加它们逐渐旋转的速度，所以它开始缓慢，逐渐加速，保持最高速度，比如原来的 7 倍，然后慢慢回到起始速度并循环执行..

当前在“1200”区域的函数末尾设置了旋转所需的时间，所以我假设它需要来自一个变量并将该行为存储在函数中？只是不知道下一步该去哪里。

setInterval(() => {
  const up = document.querySelector('.span-one[data-up]');
  const show = document.querySelector('.span-one[data-show]');
  const down = show.nextElementSibling || document.querySelector('.span-one:first- 
  child');

  up.removeAttribute('data-up');
  show.removeAttribute('data-show');
  show.setAttribute('data-up', '');
  down.setAttribute('data-show', '');

}, 1200);

【问题讨论】：

您是否尝试过声明一个全局变量并在函数体内更改此值？
用css动画不是更好吗？
@Reporter 这很奇怪，我承认我对 JS 很陌生。我已经声明了一个全局变量并添加了一个while循环，其中每个循环将rotationSpeed变量减半，但是它不会通过循环播放并随着我的进行而提高速度？
@AbrorAbdullaev 似乎是一个不错的选择。使用 CSS 动画，我是否可以慢慢开始旋转，然后增加它，保持增加，然后减少回到原来的状态，然后不断循环？
让我试试 jsfiddle @jccoder

标签： javascript html css frontend web-frontend

【解决方案1】：

这是一个可以帮助你的代码虽然请记住，这些样式是应用在一个裸元素上的。在您的代码中，您还必须考虑上下文。

/* Here you defined the animation. You can play around more and adjust the speed as you want */
@keyframes example {
  /* Here are some options */
  /* uncomment the sections to experiment */
  /* 0%   { transform: rotate(0deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(120deg); }
  75%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); } */
  
/*   0%   { transform: rotate(0deg); }
  25%  { transform: rotate(80deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(290deg); }
  100% { transform: rotate(360deg); } */
  
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(100deg); }
  75%  { transform: rotate(300deg); }
  100% { transform: rotate(360deg); }
  
  /* You can google about the animations and how these percentages work, but actually its pretty simple */
}

.rotating {
  /* This is optional, but needed if your title is block level element, just play around and see the differnce */
  display: inline-block;
  
  /* this is mandatory */
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

<html>
  <body>
    <h1 class="rotating">My Dear Rotating Title</h1>
  </body>
</html>

Stackoverflow 对粘贴 jsfiddle 的链接过于严格，所以我在这里嵌入了它

【讨论】：

非常感谢您。有什么方法可以私下给你发消息，以便进一步询问我正在制作的动画的用例吗？将不胜感激。