├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pradip Banjara || Windows Animation 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Windows 20 |
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 | --------------------------------------------------------------------------------