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