├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bird Loading Animation 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | overflow: hidden; 9 | } 10 | 11 | .wrapper{ 12 | width: 100vw; 13 | height: 100vh; 14 | background-color: #18233e; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | .bird{ 21 | position: relative; 22 | width: 250px; 23 | height: 250px; 24 | } 25 | 26 | .hair-container{ 27 | position: absolute; 28 | width: 100%; 29 | height: 100%; 30 | top: 0; 31 | left: 0; 32 | animation: rotateHair 3s infinite ease-in-out; 33 | } 34 | 35 | .hair{ 36 | position: absolute; 37 | width: 50%; 38 | height: 100%; 39 | top: 0; 40 | left: 50%; 41 | background-color: #A12A15; 42 | border-radius: 0 125px 125px 0; 43 | } 44 | 45 | .face{ 46 | position: absolute; 47 | width: 70%; 48 | height: 70%; 49 | top: 50%; 50 | left: 50%; 51 | transform: translate(-50%, -50%); 52 | z-index: 1; 53 | } 54 | 55 | .white-container{ 56 | position: absolute; 57 | width: 100%; 58 | height: 100%; 59 | top: 0; 60 | left: 0; 61 | z-index: 1; 62 | animation: rotateWhite 3s infinite ease-in-out; 63 | } 64 | 65 | .white{ 66 | position: absolute; 67 | width: 50%; 68 | height: 100%; 69 | top: 0; 70 | left: 50%; 71 | border-radius: 0 87.5px 87.5px 0; 72 | background-color: white; 73 | } 74 | 75 | .shadow-container{ 76 | position: absolute; 77 | width: 100%; 78 | height: 100%; 79 | top: 0; 80 | left: 0; 81 | z-index: 2; 82 | animation: rotateShadow 3s infinite ease-in-out; 83 | } 84 | 85 | .shadow{ 86 | position: absolute; 87 | width: 50%; 88 | height: 50%; 89 | top: 50%; 90 | left: 50%; 91 | background-color: rgba(0, 0, 0, 0.15); 92 | border-radius: 0 0 87.5px 0; 93 | } 94 | 95 | .bigBeak-container{ 96 | position: absolute; 97 | width: 100%; 98 | height: 100%; 99 | top: 0; 100 | left: 0; 101 | z-index: 3; 102 | animation: rotBigBeak 3s infinite ease-in-out; 103 | } 104 | 105 | .bigBeak{ 106 | position: absolute; 107 | width: 50%; 108 | height: 50%; 109 | top: 0; 110 | left: 0; 111 | background-color: #f7ce42; 112 | border-radius: 87.5px 0 0 0; 113 | } 114 | 115 | .smallBeak-container{ 116 | position: absolute; 117 | width: 100%; 118 | height: 100%; 119 | top: 0; 120 | left: 0; 121 | z-index: 0; 122 | animation: rotSmallBeak 3s infinite ease-in-out; 123 | } 124 | 125 | .smallBeak{ 126 | position: absolute; 127 | width: 25%; 128 | height: 25%; 129 | top: 50%; 130 | left: 25%; 131 | background-color: #f7a500; 132 | border-radius: 0 0 0 43.25px; 133 | } 134 | 135 | .eye{ 136 | position: absolute; 137 | width: 25%; 138 | height: 25%; 139 | bottom: 51%; 140 | left: 51%; 141 | background-color: #18233e; 142 | border-radius: 50%; 143 | z-index: 2; 144 | animation: moveEye 3s infinite ease-in-out; 145 | } 146 | 147 | @keyframes rotateHair{ 148 | 0%{ 149 | transform: rotate(-360deg); 150 | } 151 | 15%{ 152 | transform: rotate(-360deg); 153 | } 154 | 35%{ 155 | transform: rotate(-180deg); 156 | } 157 | 65%{ 158 | transform: rotate(-180deg); 159 | } 160 | 85%{ 161 | transform: rotate(0deg); 162 | } 163 | 100%{ 164 | transform: rotate(0deg); 165 | } 166 | } 167 | 168 | @keyframes rotateWhite{ 169 | 0%{ 170 | transform: rotate(0deg); 171 | } 172 | 15%{ 173 | transform: rotate(0deg); 174 | } 175 | 35%{ 176 | transform: rotate(-180deg); 177 | } 178 | 65%{ 179 | transform: rotate(-180deg); 180 | } 181 | 85%{ 182 | transform: rotate(-360deg); 183 | } 184 | 100%{ 185 | transform: rotate(-360deg); 186 | } 187 | } 188 | 189 | @keyframes rotateShadow{ 190 | 15%{ 191 | transform: rotate(0deg); 192 | } 193 | 35%{ 194 | transform: rotate(90deg); 195 | } 196 | 65%{ 197 | transform: rotate(90deg); 198 | } 199 | 85%{ 200 | transform: rotate(0deg); 201 | } 202 | } 203 | 204 | @keyframes rotBigBeak{ 205 | 15%{ 206 | transform: rotate(0deg); 207 | } 208 | 35%{ 209 | transform: rotate(90deg); 210 | } 211 | 65%{ 212 | transform: rotate(90deg); 213 | } 214 | 85%{ 215 | transform: rotate(0deg); 216 | } 217 | } 218 | 219 | @keyframes rotSmallBeak{ 220 | 15%{ 221 | transform: rotate(0deg); 222 | } 223 | 35%{ 224 | transform: rotate(-90deg); 225 | } 226 | 65%{ 227 | transform: rotate(-90deg); 228 | } 229 | 85%{ 230 | transform: rotate(0deg); 231 | } 232 | } 233 | 234 | @keyframes moveEye{ 235 | 15%{ 236 | left: 51%; 237 | transform: translate(0px); 238 | } 239 | 35%{ 240 | left: 49%; 241 | transform: translate(-100%); 242 | } 243 | 65%{ 244 | left: 49%; 245 | transform: translate(-100%); 246 | } 247 | 85%{ 248 | left: 51%; 249 | transform: translate(0px); 250 | } 251 | } --------------------------------------------------------------------------------