#212121
1.pl { 2 box-shadow: 2em 0 2em rgba(0, 0, 0, 0.2) inset, -2em 0 2em rgba(255, 255, 255, 0.1) inset; 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 position: relative; 7 letter-spacing: 0.1em; 8 text-transform: uppercase; 9 transform: rotateX(30deg) rotateZ(45deg); 10 width: 14em; 11 height: 14em; 12 color: white; 13} 14 15.pl, .pl__dot { 16 border-radius: 50%; 17} 18 19.pl__dot { 20 animation-name: shadow724; 21 box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.5); 22 top: calc(50% - 0.75em); 23 left: calc(50% - 0.75em); 24 width: 1.5em; 25 height: 1.5em; 26} 27 28.pl__dot, .pl__dot:before, .pl__dot:after { 29 animation-duration: 2s; 30 animation-iteration-count: infinite; 31 position: absolute; 32} 33 34.pl__dot:before, .pl__dot:after { 35 content: ""; 36 display: block; 37 left: 0; 38 width: inherit; 39 transition: background-color var(--trans-dur); 40} 41 42.pl__dot:before { 43 animation-name: pushInOut1724; 44 background-color: var(--bg); 45 border-radius: inherit; 46 box-shadow: 0.05em 0 0.1em rgba(255, 255, 255, 0.2) inset; 47 height: inherit; 48 z-index: 1; 49} 50 51.pl__dot:after { 52 animation-name: pushInOut2724; 53 background-color: var(--primary1); 54 border-radius: 0.75em; 55 box-shadow: 0.1em 0.3em 0.2em rgba(255, 255, 255, 0.4) inset, 0 -0.4em 0.2em #2e3138 inset, 0 -1em 0.25em rgba(0, 0, 0, 0.3) inset; 56 bottom: 0; 57 clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%); 58 height: 3em; 59 transform: rotate(-45deg); 60 transform-origin: 50% 2.25em; 61} 62 63.pl__dot:nth-child(1) { 64 transform: rotate(0deg) translateX(5em) rotate(0deg); 65 z-index: 5; 66} 67 68.pl__dot:nth-child(1), .pl__dot:nth-child(1):before, .pl__dot:nth-child(1):after { 69 animation-delay: 0s; 70} 71 72.pl__dot:nth-child(2) { 73 transform: rotate(-30deg) translateX(5em) rotate(30deg); 74 z-index: 4; 75} 76 77.pl__dot:nth-child(2), .pl__dot:nth-child(2):before, .pl__dot:nth-child(2):after { 78 animation-delay: -0.1666666667s; 79} 80 81.pl__dot:nth-child(3) { 82 transform: rotate(-60deg) translateX(5em) rotate(60deg); 83 z-index: 3; 84} 85 86.pl__dot:nth-child(3), .pl__dot:nth-child(3):before, .pl__dot:nth-child(3):after { 87 animation-delay: -0.3333333333s; 88} 89 90.pl__dot:nth-child(4) { 91 transform: rotate(-90deg) translateX(5em) rotate(90deg); 92 z-index: 2; 93} 94 95.pl__dot:nth-child(4), .pl__dot:nth-child(4):before, .pl__dot:nth-child(4):after { 96 animation-delay: -0.5s; 97} 98 99.pl__dot:nth-child(5) { 100 transform: rotate(-120deg) translateX(5em) rotate(120deg); 101 z-index: 1; 102} 103 104.pl__dot:nth-child(5), .pl__dot:nth-child(5):before, .pl__dot:nth-child(5):after { 105 animation-delay: -0.6666666667s; 106} 107 108.pl__dot:nth-child(6) { 109 transform: rotate(-150deg) translateX(5em) rotate(150deg); 110 z-index: 1; 111} 112 113.pl__dot:nth-child(6), .pl__dot:nth-child(6):before, .pl__dot:nth-child(6):after { 114 animation-delay: -0.8333333333s; 115} 116 117.pl__dot:nth-child(7) { 118 transform: rotate(-180deg) translateX(5em) rotate(180deg); 119 z-index: 2; 120} 121 122.pl__dot:nth-child(7), .pl__dot:nth-child(7):before, .pl__dot:nth-child(7):after { 123 animation-delay: -1s; 124} 125 126.pl__dot:nth-child(8) { 127 transform: rotate(-210deg) translateX(5em) rotate(210deg); 128 z-index: 3; 129} 130 131.pl__dot:nth-child(8), .pl__dot:nth-child(8):before, .pl__dot:nth-child(8):after { 132 animation-delay: -1.1666666667s; 133} 134 135.pl__dot:nth-child(9) { 136 transform: rotate(-240deg) translateX(5em) rotate(240deg); 137 z-index: 4; 138} 139 140.pl__dot:nth-child(9), .pl__dot:nth-child(9):before, .pl__dot:nth-child(9):after { 141 animation-delay: -1.3333333333s; 142} 143 144.pl__dot:nth-child(10) { 145 transform: rotate(-270deg) translateX(5em) rotate(270deg); 146 z-index: 5; 147} 148 149.pl__dot:nth-child(10), .pl__dot:nth-child(10):before, .pl__dot:nth-child(10):after { 150 animation-delay: -1.5s; 151} 152 153.pl__dot:nth-child(11) { 154 transform: rotate(-300deg) translateX(5em) rotate(300deg); 155 z-index: 6; 156} 157 158.pl__dot:nth-child(11), .pl__dot:nth-child(11):before, .pl__dot:nth-child(11):after { 159 animation-delay: -1.6666666667s; 160} 161 162.pl__dot:nth-child(12) { 163 transform: rotate(-330deg) translateX(5em) rotate(330deg); 164 z-index: 6; 165} 166 167.pl__dot:nth-child(12), .pl__dot:nth-child(12):before, .pl__dot:nth-child(12):after { 168 animation-delay: -1.8333333333s; 169} 170 171.pl__text { 172 font-size: 0.75em; 173 max-width: 5rem; 174 position: relative; 175 text-shadow: 0 0 0.1em var(--fg-t); 176 transform: rotateZ(-45deg); 177} 178 179/* Animations */ 180@keyframes shadow724 { 181 from { 182 animation-timing-function: ease-in; 183 box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3); 184 } 185 186 25% { 187 animation-timing-function: ease-out; 188 box-shadow: 0.1em 0.1em 0 0.1em black, 0.8em 0 0.8em rgba(0, 0, 0, 0.5); 189 } 190 191 50%, to { 192 box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3); 193 } 194} 195 196@keyframes pushInOut1724 { 197 from { 198 animation-timing-function: ease-in; 199 background-color: var(--bg); 200 transform: translate(0, 0); 201 } 202 203 25% { 204 animation-timing-function: ease-out; 205 background-color: var(--primary2); 206 transform: translate(-71%, -71%); 207 } 208 209 50%, to { 210 background-color: var(--bg); 211 transform: translate(0, 0); 212 } 213} 214 215@keyframes pushInOut2724 { 216 from { 217 animation-timing-function: ease-in; 218 background-color: var(--bg); 219 clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%); 220 } 221 222 25% { 223 animation-timing-function: ease-out; 224 background-color: var(--primary1); 225 clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0 100%); 226 } 227 228 50%, to { 229 background-color: var(--bg); 230 clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%); 231 } 232}
11K views
11K views
Comments
MIT License