在操作系统中,所有程序和库的加载都由加载器处理,加载器是启动程序的重要过程之一。程序保存在内存中以供进一步执行。
HTML 代码:在本节中,设计了代码的基本结构。
Animated loader
GeeksforGeeks loading...
CSS 代码:在本节中,卡通加载器的设计是使用@keyframes等 CSS 属性实现的。动画是通过从一组样式逐渐更改为另一组样式来创建的。更改以百分比或关键字“from”和“to”表示,这将与 0% 和 100% 相同。我们可以根据需要多次更改 CSS 样式集。
句法:
@keyframes animationname {keyframes-selector {css-styles;}}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #202020;
}
.pieces{
padding: 10px;
border-radius: 50%;
background: #ffcc00;
position: absolute;
right: 40%;
animation: pieces 1s linear infinite;
}
.one{
position: absolute;
top: 50.5%;
left: 30%;
background: yellowgreen;
border-radius: 0 0 125px 125px;
height: 125px;
width: 250px;
animation: anim1 1s linear infinite;
}
.two{
position: absolute;
top: 36.5%;
left: 30%;
background: yellowgreen;
border-radius: 125px 125px 0 0;
height: 125px;
width: 250px;
animation: anim2 1s linear infinite;
}
.eye{
position: absolute;
right: 60%;
top: 40%;
background: #202020;
padding: 12px;
border-radius: 50%;
animation: eye 1s linear infinite;
}
p{
position: absolute;
font-weight: bold;
text-transform: uppercase;
font-size: 25px;
letter-spacing: 2px;
top: 53%;
right: 30%;
font-family: arial;
color: green;
}
@keyframes anim1{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(20deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes anim2{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(-20deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes eye{
0%{
top: 40%;
right: 60%;
}
50%{
top: 40.3%;
right: 60.3%;
}
100%{
top: 40%;
right: 60%;
}
}
@keyframes pieces{
0%{
right: 40%;
}
100%{
right: 60%;
}
}
完整代码:是以上两个代码段的组合。
Animated loader
GeeksforGeeks loading...
输出: