可以使用 HTML 和 CSS 创建发光立方体加载器。我们将使用 HTML 来创建结构和一些 CSS 属性。
加载器是操作系统的一部分,负责加载程序和库。它是启动程序过程中的重要阶段之一,因为它将程序放入内存并准备执行。所以我们将使用 HTML 和 CSS 属性创建一个圆形加载器。
HTML 代码:在本节中,我们将设计代码的基本结构。
Glowing cube loading
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代码内部添加的。
Glowing cube loading
Loading GeeksforGeeks...
输出: