如何用我的代码制作加载动画答案

【问题标题】：how to make a loading animation with my code如何用我的代码制作加载动画
【发布时间】：2022-11-15 05:25:31
【问题描述】：

我似乎无法弄清楚如何让盒子旋转。我尝试了转换、JS，甚至是 html 特殊代码。我确实不擅长 CSS，所以这是我目前的代码：

<!DOCTYPE html>
<html>
<head>
<script>
//great code from Scriptkiddy1337 on stack overflow
const pageStack=[];
function getParameterByName(name, url) {
  url = url || window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
window.addEventListener('load', function (e) {
  var templates = document.getElementsByClassName('sitecontent');
  for (var i = 0, v; v = templates[i]; i++) {
    for (var j = 0, x; x = v.childNodes[j]; j++) {
      if (x.nodeType === Node.ELEMENT_NODE) {
        pageStack.push(x);
      }
    }  
  }
  var pageIndex = getParameterByName('page') || '0';
  loadPage(pageIndex);
});
function loadPage(index) {
  if (index >= pageStack.length || index < 0) {
    document.body.innerText = '404 Page not found';
    return;
  }
  document.body.innerHTML = '';
  document.body.appendChild(pageStack[index]);
}
</script>
<style>
box{
  transition: 3s;
  width:50px;
  height:50px;
  position:fixed;
  transform:/*im confused here*/;
}
</style>
</head>
<body>
<pageholder class="sitecontent">
<page>
<animator>
  <!--I want them to rotate in a circle-->
  <box style="background-color:red">.</box><br><br><br>
  <box style="background-color:red">.</box><br><br><br>
  <box style="background-color:red">.</box><br><br><br>
</animator>
<a href="?page=1">Next Page</a>
</page>
<page>
<h1>Homepage</h1>
<hr>
<p>Need help :(</p>
</page>
</pageholder>
</body>
</html>

我尝试转换 CSSstuff、JS 动画（我也不太擅长），甚至是特殊的 HTML 代码。我可能遗漏了一些东西，但据我所知（不幸的是，我知道的并不多），我几乎已经完成了我能想到的所有事情。

【问题讨论】：

标签： html css

【解决方案1】：

我强烈建议您阅读CSS Animations

<style>
/* The animation code */
@keyframes rotateBox {
  to {transform: rotate(360deg)}
}
box{
  transition: 3s;
  width: 50px;
  height: 50px;
  position: fixed;
  /* Use the animation here */
  animation: rotateBox 3s;
}
</style>

【讨论】：