File tree Expand file tree Collapse file tree 2 files changed +82
-0
lines changed
Expand file tree Collapse file tree 2 files changed +82
-0
lines changed Original file line number Diff line number Diff line change 2626 align-items : center;
2727 width : 100vw ;
2828 height : 100vh ;
29+ background-color : # fff ;
2930 }
3031
3132 .circle {
Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 " />
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6+ < title > Day 83/100</ title >
7+ </ head >
8+ < body >
9+ < main >
10+ < div class ="square ">
11+ < div class ="line-1 "> </ div >
12+ < div class ="line-2 "> </ div >
13+ < div class ="line-3 "> </ div >
14+ </ div >
15+ </ main >
16+
17+ < style >
18+ body {
19+ margin : 0 ;
20+ overflow : hidden;
21+ display : flex;
22+ justify-content : center;
23+ align-items : center;
24+ width : 100vw ;
25+ height : 100vh ;
26+ background-color : # 000 ;
27+ }
28+
29+ .square {
30+ position : relative;
31+ width : 100px ;
32+ height : 100px ;
33+ }
34+
35+ .line-1 ,
36+ .line-2 ,
37+ .line-3 {
38+ position : absolute;
39+ width : 20% ;
40+ height : 20% ;
41+ background-color : # fff ;
42+ }
43+
44+ .line-1 {
45+ top : 50% ;
46+ left : 0% ;
47+ transform : translate (0% , -50% );
48+
49+ animation : line-animation 3s 0s ease-in-out infinite;
50+ }
51+
52+ .line-2 {
53+ top : 50% ;
54+ left : 40% ;
55+ transform : translate (0% , -50% );
56+
57+ animation : line-animation 3s 1s ease-in-out infinite;
58+ }
59+
60+ .line-3 {
61+ top : 50% ;
62+ left : 80% ;
63+ transform : translate (0% , -50% );
64+
65+ animation : line-animation 3s 2s ease-in-out infinite;
66+ }
67+
68+ @keyframes line-animation {
69+ 0% {
70+ height : 20% ;
71+ }
72+ 50% {
73+ height : 100% ;
74+ }
75+ 100% {
76+ height : 20% ;
77+ }
78+ }
79+ </ style >
80+ </ body >
81+ </ html >
You can’t perform that action at this time.
0 commit comments