O animatie la care a trebuit sa sincronizez liniile (rezultand efectul de una singura) de jur-imprejurul dreptunghiului cu patratele ce isi schimba locul intre ele.
<div class="squares"> <div class="squares-layer"> <div class="squares-layer-top"> <div class="squares-layer-top-line"></div> </div> <div class="squares-layer-right"> <div class="squares-layer-right-line"></div> </div> <div class="squares-layer-bottom"> <div class="squares-layer-bottom-line"></div> </div> <div class="squares-layer-left"> <div class="squares-layer-left-line"></div> </div> </div> <div class="squares-layer"> <div class="squares-layer-main"> <div class="squares-layer-main-sqs"> <div class="squares-layer-main-sq squares-layer-main-sq1"></div> <div class="squares-layer-main-sq squares-layer-main-sq2"></div> <div class="squares-layer-main-sq squares-layer-main-sq3"></div> <div class="squares-layer-main-sq squares-layer-main-sq4"></div> <div class="squares-layer-main-sq squares-layer-main-sq5"></div> </div> </div> </div> </div>
.squares,
.squares-layer-main-sqs{
position: relative;
}
.squares-layer,
.squares-layer-top,
.squares-layer-bottom,
.squares-layer-left,
.squares-layer-right,
.squares-layer-top-line,
.squares-layer-right-line,
.squares-layer-bottom-line,
.squares-layer-left-line{
position: absolute;
}
.squares{
width: 100%;
min-width: 150px;
max-width: 300px;
height: 100px;
background: white;
margin: auto;
}
.squares-layer{
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.squares-layer-top,
.squares-layer-bottom{
width: calc(100% - 10px);
height: 2px;
left: 5px;
}
.squares-layer-left,
.squares-layer-right{
width: 2px;
height: calc(100% - 10px);
top: 5px;
}
.squares-layer-top{
top: 5px;
}
.squares-layer-top-line,
.squares-layer-right-line,
.squares-layer-bottom-line,
.squares-layer-left-line{
background: black;
}
.squares-layer-top-line{
width: 0;
height: 100%;
animation: squares-layer-top-line 10s linear infinite;
}
@keyframes squares-layer-top-line{
0%{
right: 0;
}
12.5%{
width: 100%;
right: 0;
}
25%, 100%{
width: 0;
right: 100%;
}
}
.squares-layer-bottom{
bottom: 5px;
}
.squares-layer-bottom-line{
width: 0;
height: 100%;
animation: squares-layer-bottom-line 10s linear infinite;
}
@keyframes squares-layer-bottom-line{
0%, 50%{
width: 0;
left: 0;
}
62.5%{
width: 100%;
left: 0;
}
75%, 100%{
width: 0;
left: 100%;
}
}
.squares-layer-left{
left: 5px;
}
.squares-layer-left-line{
width: 100%;
height: 0;
animation: squares-layer-left-line 10s linear infinite;
}
@keyframes squares-layer-left-line{
0%, 25%{
height: 0;
top: 0;
}
37.5%{
height: 100%;
top: 0;
}
50%, 100%{
height: 0;
top: 100%;
}
}
.squares-layer-right{
right: 5px;
}
.squares-layer-right-line{
width: 100%;
height: 0;
animation: squares-layer-right-line 10s linear infinite;
}
@keyframes squares-layer-right-line{
0%, 75%{
height: 0;
bottom: 0;
}
87.5%{
height: 100%;
bottom: 0;
}
100%{
height: 0;
bottom: 100%;
}
}
.squares-layer:nth-child(2),
.squares-layer-main{
display: flex;
justify-content: center;
align-items: center;
}
.squares-layer-main{
width: calc(100% - 22px);
height: calc(100% - 22px);
box-shadow: inset 2px 2px 0 black, inset -2px -2px 0 black;
background: #282c34;
}
.squares-layer-main-sqs{
width: calc(20px * 4 + (4px * 4));
height: calc(20px * 3 + (4px * 2));
}
.squares-layer-main-sq{
width: 20px;
height: 20px;
background: #ff8c00;
display: inline-block;
position: absolute;
}
.squares-layer-main-sq1{
animation: squares-layer-main-sq1 2.4s 0.2s ease-in-out infinite;
}
@keyframes squares-layer-main-sq1{
0%{
left: 0;
top: 0;
}
8.3%, 100%{
left: 0;
top: calc(20px + 4px);
}
}
.squares-layer-main-sq2{
animation: squares-layer-main-sq2 2.4s 0.2s ease-in-out infinite;
}
@keyframes squares-layer-main-sq2{
0%{
left: 0;
top: calc(20px + 4px);
}
8.3%{
left: 0;
top: calc((20px + 4px) * 2);
}
16.6%{
left: calc(20px + 4px);
top: calc((20px + 4px) * 2);
}
25%, 83%{
left: calc(20px + 4px);
top: calc(20px + 4px);
}
91%{
left: calc(20px + 4px);
top: 0;
}
100%{
left: 0;
top: 0;
}
}
.squares-layer-main-sq3{
animation: squares-layer-main-sq3 2.4s 0.2s ease-in-out infinite;
}
@keyframes squares-layer-main-sq3{
0%, 100%{
left: calc(20px + 4px);
top: calc(20px + 4px);
}
16.6%{
left: calc(20px + 4px);
top: calc(20px + 4px);
}
25%{
left: calc(20px + 4px);
top: 0;
}
33.3%{
left: calc((20px + 4px) * 2);
top: 0;
}
42%{
left: calc((20px + 4px) * 2);
top: calc(20px + 4px);
}
65%{
left: calc((20px + 4px) * 2);
top: calc(20px + 4px);
}
75%{
left: calc((20px + 4px) * 2);
top: calc((20px + 4px) * 2);
}
83%{
left: calc(20px + 4px);
top: calc((20px + 4px) * 2);
}
92%{
left: calc(20px + 4px);
top: calc(20px + 4px);
}
}
.squares-layer-main-sq4{
animation: squares-layer-main-sq4 2.4s 0.2s ease-in-out infinite;
}
@keyframes squares-layer-main-sq4{
0%, 33%{
left: calc((20px + 4px) * 2);
top: calc(20px + 4px);
}
42%{
left: calc((20px + 4px) * 2);
top: calc((20px + 4px) * 2);
}
50%{
left: calc((20px + 4px) * 3);
top: calc((20px + 4px) * 2);
}
60%, 100%{
left: calc((20px + 4px) * 3);
top: calc(20px + 4px);
}
}
.squares-layer-main-sq5{
animation: squares-layer-main-sq5 2.4s 0.2s ease-in-out infinite;
}
@keyframes squares-layer-main-sq5{
0%{
left: calc((20px + 4px) * 3);
top: calc(20px + 4px);
}
50%{
left: calc((20px + 4px) * 3);
top: calc(20px + 4px);
}
58%{
left: calc((20px + 4px) * 3);
top: 0;
}
66%{
left: calc((20px + 4px) * 2);
top: 0;
}
75%{
left: calc((20px + 4px) * 2);
top: calc(20px + 4px);
}
100%{
left: calc((20px + 4px) * 2);
top: calc(20px + 4px);
}
}
Foloseste aceasta interfata grafica ce simuleaza un sistem de operare. Sper ca aplicatiile din acesta sa iti fie utile.