├── index.html
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Pradip Banjara || Windows Animation
8 |
9 |
10 |
11 |
12 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | font-family: "Segoe UI Web (West European)";
5 | color: #fff;
6 | font-size: 45px;
7 | overflow: hidden;
8 | }
9 | #container {
10 | height: 100vh;
11 | width: 100%;
12 | background: #1560d2;
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | justify-content: center;
17 | perspective: 400px;
18 | animation: perspective 1s forwards;
19 | }
20 |
21 | #windows_container {
22 |
23 | display: grid;
24 | grid-template-columns: 1fr 1fr;
25 | grid-template-rows: 1fr 1fr;
26 | grid-gap: 10px;
27 | transform: rotateY(-35deg) scale(0.5);
28 | transform-style: preserve-3d;
29 | }
30 |
31 | #window {
32 | background: #fff;
33 | width: 185px;
34 | height: 135px;
35 | content: "";
36 | animation: anim 2s ease;
37 | transform-origin: bottom right;
38 | }
39 | span {
40 | margin-left: 50px;
41 | animation: text-anim 1s ease forwards;
42 | animation-delay: 0.5s;
43 | opacity: 0;
44 | }
45 |
46 | #window:nth-child(1) {
47 | animation-delay: 0.1s;
48 | }
49 | #window:nth-child(2) {
50 | animation-delay: 0.2s;
51 | }
52 | #window:nth-child(3) {
53 | animation-delay: 0.3s;
54 | }
55 | #window:nth-child(4) {
56 | animation-delay: 0.4s;
57 | }
58 |
59 | @keyframes anim {
60 | 0% {
61 | transform: rotate(-2deg);
62 | opacity: 0;
63 | transform: scale(0.9);
64 | }
65 | 100% {
66 | transform: rotate(0deg);
67 | opacity: 1;
68 | transform: scale(1);
69 | }
70 | }
71 |
72 | @keyframes text-anim {
73 | 0% {
74 | opacity: 0;
75 | transform: translateY(-10px);
76 | }
77 | 100% {
78 | opacity: 1;
79 | transform: translateY(0px);
80 | }
81 | }
82 |
83 | @keyframes perspective {
84 | from {
85 | perspective: 100px;
86 | }
87 | to {
88 | perspective: 300px;
89 | }
90 | }
91 |
92 | @font-face {
93 | font-family: "Segoe UI Web (West European)";
94 | src: url("https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2")
95 | format("woff2"),
96 | url("https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff")
97 | format("woff");
98 | font-weight: 600;
99 | font-style: normal;
100 | }
101 |
--------------------------------------------------------------------------------