使用 HTML 和 CSS 的发光立方体加载器

可以使用 HTML 和 CSS 创建发光立方体加载器。我们将使用 HTML 来创建结构和一些 CSS 属性。

加载器是操作系统的一部分，负责加载程序和库。它是启动程序过程中的重要阶段之一，因为它将程序放入内存并准备执行。所以我们将使用 HTML 和 CSS 属性创建一个圆形加载器。

HTML 代码：在本节中，我们将设计代码的基本结构。

    
    
    
    


    
   
Loading GeeksforGeeks...
   
 
        
   
  

CSS 代码：在本节中，我们将使用一些 CSS 属性来设计发光立方体。我们将使用指定动画代码的@keyframes。动画是通过从一组CSS 样式逐渐更改为另一组来创建的。样式更改将以百分比或关键字“from”和“to”发生，这与 0% 和 100% 相同。我们可以多次更改 CSS 样式集。
@keyframes 的语法是： @keyframes animationname {keyframes-selector {css-styles;}}

body{
    background: black;
}
h1{ 
    margin-top: 300px;
    text-align: center;
    color: darkgreen;
}
  
.loading{
      
    width: 50px;
    height: 50px;
    margin: 100px auto;
    position: relative;
}
  
.loading span{
    display: block;
    position: absolute;
    bottom: 0;
    background: yellowgreen;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    animation: loading 1.5s infinite ease-in-out;
}
  
@keyframes loading{
    0%{ 
        transform: rotate(0deg);
        background: yellow;
        box-shadow: 0 0 10px black, 
                    0 0 10px 5px green;
    }
    25%{
        transform: rotate(80deg);
        box-shadow: 0 0 10px #9966ff,
                    0 0 10px 5px black, 
                    0 0 10px 5px yellow;
    }
    100%{
        transform: rotate(0deg);
    }
}

完整代码：是以上两个代码部分的组合，CSS代码是通过使用style标签在HTML代码内部添加的。

    
    
    
    


    
   
Loading GeeksforGeeks...
   
 
        
   
  

输出：