如何在一个html页面中显示两个或多个Css加载程序_Html_Css

如何在一个html页面中显示两个或多个Css加载程序

html css

如何在一个html页面中显示两个或多个Css加载程序,html,css,Html,Css,有人知道如何在一个HTML页面中放置和显示两个或多个具有不同属性的Css加载程序吗第一个旋转器需要旋转90度才能完美工作第二个微调器需要旋转360度，但其输出与第一个微调器的输出重复我从W3C尝试这个然后修改它并将其命名为Double Loader.html 我想让第一个加载器旋转90度另一个装载机360度旋转 HTML代码：。半装载机{ 边框：16px实心#F3；边界半径：50%；边框顶部：16px实心#3498db；宽度：120px；高度：120px； -webkit

有人知道如何在一个HTML页面中放置和显示两个或多个具有不同属性的Css加载程序吗

第一个旋转器需要旋转90度才能完美工作
第二个微调器需要旋转360度，但其输出与第一个微调器的输出重复

我从W3C尝试这个然后修改它并将其命名为Double Loader.html

我想让第一个加载器旋转90度另一个装载机360度旋转

HTML代码：

。半装载机{
边框：16px实心#F3；
边界半径：50%；
边框顶部：16px实心#3498db；
宽度：120px；
高度：120px；
-webkit动画：旋转2s线性无限；
/*狩猎*/
动画：旋转2s线性无限；
}
/*狩猎*/
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
50% {
变换：旋转（360度）；
}
}
.满载{
边框：16px实心#F3；
边界半径：50%；
边框顶部：16px实心#3498db；
宽度：240px；
高度：240px；
-webkit动画：旋转2s线性无限；
/*狩猎*/
动画：旋转2s线性无限；
}


装载机
360装载机|（测试版）

为整个旋转范围0到100%再创建一个关键帧

。半装载机{
边框：16px实心#F3；
边界半径：50%；
边框顶部：16px实心#3498db；
宽度：120px；
高度：120px；
-webkit动画：旋转2s线性无限；
/*狩猎*/
动画：旋转2s线性无限；
}
@-webkit关键帧已满{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧已满{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
/*狩猎*/
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
50% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
50% {
变换：旋转（360度）；
}
}
.满载{
边框：16px实心#F3；
边界半径：50%；
边框顶部：16px实心#3498db；
宽度：240px；
高度：240px；
-webkit动画：全2s线性无限；
/*狩猎*/
动画：全2s线性无限；
}


装载机
360装载机|（测试版）

请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确地说出你在问什么。请参阅页面以获取澄清此问题的帮助。我可以在一个html页面中看到两个加载程序。您的问题应该是>如何在一个html页面中显示两个或多个Css动画？此外，我看到动画的速度达到360%并返回。你在寻找一个完整的360%无限动画吗？我编辑了它，并试图做得更好。谢谢

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>A 90  Loader</h2>
<div class="Halfloader"></div>
<h2>A 360 Loader | (Beta)</h2>
<div class="Fullloader"></div>

</body>
</html>

.Halfloader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(360deg); }
}

.Fullloader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 240px;
  height: 240px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}