Loader by TechByElijah
#e8e8e8
1.center { 2 position: absolute; 3 transform: translateX(-50%); 4 left: 50%; 5} 6 7.container { 8 height: 31.25em; 9 width: 21.87em; 10 margin-top: -325px; 11} 12 13.rope { 14 height: 13.62em; 15 width: 0.15em; 16 background-color: #ffffff; 17 animation: swing 2s infinite; 18} 19 20@keyframes swing { 21 50% { 22 transform: translateY(-4em); 23 } 24} 25 26.legs { 27 height: 1.12em; 28 width: 7.5em; 29 background-color: transparent; 30 box-shadow: 0 0 0 0.12em #140243, 0 0 0 1.06em #1b1676, 0 0 0 1.18em #140243; 31 top: 12.5em; 32 border-radius: 3.12em; 33} 34 35.boot-l, 36.boot-r { 37 height: 1.25em; 38 width: 2.5em; 39 background-color: #e32832; 40 position: absolute; 41 border: 0.12em solid #140243; 42 bottom: 1.12em; 43} 44 45.boot-l { 46 left: 1em; 47} 48 49.boot-r { 50 transform: rotateY(180deg); 51 left: 3.81em; 52} 53 54.boot-l:before, 55.boot-r:before { 56 content: ""; 57 position: absolute; 58 width: 0; 59 height: 0; 60 border-bottom: 1.12em solid #140243; 61 border-left: 1.18em solid transparent; 62 bottom: 1.31em; 63 left: 1.46em; 64} 65 66.boot-l:after, 67.boot-r:after { 68 content: ""; 69 position: absolute; 70 width: 0; 71 height: 0; 72 border-bottom: 1.12em solid #e32832; 73 border-left: 1em solid transparent; 74 right: 0; 75 top: -0.93em; 76} 77 78.costume { 79 height: 6.25em; 80 width: 5.62em; 81 background: linear-gradient( 82 to right, 83 #1b1676 20%, 84 #e32832 20%, 85 #e32832 80%, 86 #1b1676 80% 87 ); 88 border: 0.12em solid #140243; 89 top: 14.68em; 90} 91 92.spider { 93 height: 1.87em; 94 width: 0.93em; 95 background-color: #140243; 96 border-radius: 45%; 97 position: absolute; 98 transform: translate(-50%, -50%); 99 top: calc(50% + 0.93em); 100 left: 50%; 101} 102 103.s1, 104.s3 { 105 height: 7.5em; 106 width: 2.5em; 107 border-radius: 0 0 1.37em 1.37em; 108 border-bottom: 0.12em solid #140243; 109 position: absolute; 110} 111 112.s2, 113.s4 { 114 height: 7.5em; 115 width: 3.12em; 116 border-radius: 0 0 1.56em 1.56em; 117 border-bottom: 0.12em solid #140243; 118 position: absolute; 119} 120 121.s1, 122.s2, 123.s3, 124.s4 { 125 left: 50%; 126} 127 128.s1 { 129 bottom: 1.43em; 130} 131 132.s2 { 133 bottom: 0.93em; 134} 135 136.s3, 137.s4 { 138 transform: translateX(-50%) rotateX(180deg); 139} 140 141.s3 { 142 top: 1.43em; 143} 144 145.s4 { 146 top: 0.93em; 147} 148 149.belt { 150 height: 0.43em; 151 width: 5.87em; 152 background-color: #e32832; 153 border: 0.12em solid #140243; 154 top: -0.12em; 155} 156 157.hand-r, 158.hand-l { 159 height: 8.12em; 160 background: linear-gradient( 161 #e32832 4.6em, 162 #140243 4.6em, 163 #140243 4.75em, 164 #1b1676 4.75em, 165 #1b1676 8.12em 166 ); 167 width: 1.12em; 168 border: 0.12em solid #140243; 169 border-radius: 1.25em; 170 position: absolute; 171 transform-origin: bottom; 172 bottom: -0.12em; 173} 174 175.hand-r { 176 right: -0.75em; 177 transform: rotate(-22deg); 178} 179 180.hand-l { 181 left: -0.75em; 182 transform: rotate(22deg); 183} 184 185.neck { 186 height: 0.37em; 187 width: 1.25em; 188 background-color: #e32832; 189 bottom: -0.62em; 190 border: 0.12em solid #140243; 191} 192 193.mask { 194 height: 4.65em; 195 width: 4.06em; 196 background-color: #e32832; 197 border-radius: 50% 50% 50% 50% / 54% 54% 46% 46%; 198 border: 0.12em solid #140243; 199 top: 6.56em; 200} 201 202.eye-l, 203.eye-r { 204 height: 0.68em; 205 width: 1.37em; 206 background-color: #ffffff; 207 border-radius: 1.37em 1.37em 0 0; 208 border: 0.12em solid #140243; 209 position: absolute; 210 top: 2.1em; 211} 212 213.eye-l { 214 left: 0.3em; 215} 216 217.eye-r { 218 right: 0.3em; 219} 220 221.cover { 222 height: 3.12em; 223 width: 0.15em; 224 background-color: #ffffff; 225 bottom: 8.12em; 226} 227 228@media screen and (min-width: 600px) { 229 .container { 230 font-size: 20px; 231 } 232}
1.4K views
1.4K views
MIT License