209 views
1.level-up-notification { 2 justify-content: center; 3 align-items: center; 4 flex-direction: column; 5 background-color: #FDD835; 6 border-radius: 10px; 7 font-weight: bold; 8 font-family: "Courier New", monospace; 9 box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 10 opacity: 0; 11 animation: scale-up 1.5s ease-in-out forwards, fade-out 0.5s ease-in-out forwards 21.5s; 12} 13 14.level-up-text { 15 text-align: center; 16 color: #fff; 17 font-size: 30px; 18 padding: 12px 20px; 19 font-weight: bold; 20 text-shadow: 2px 2px #000; 21} 22 23@keyframes confetti { 24 0% { 25 transform: translateY(-50%); 26 } 27 28 100% { 29 transform: translateY(100%); 30 } 31} 32 33@keyframes scale-up { 34 0% { 35 transform: scale(0); 36 opacity: 0; 37 } 38 39 100% { 40 transform: scale(1); 41 opacity: 1; 42 } 43} 44 45.level-up-notification:hover { 46 animation: none; 47} 48 49.level-up-notification:hover .confetti { 50 animation: confetti 0.5s ease-in-out forwards; 51} 52 53/* asd */ 54 55.confetti-container { 56 user-select: none; 57 z-index: 10; 58} 59 60.confetti { 61 position: absolute; 62 left: 0; 63 right: 0; 64 display: flex; 65 /* width: 600px; */ 66 /* height: 600px; */ 67 /* overflow: hidden; */ 68} 69 70.confetti .square { 71 width: 1rem; 72 height: 1rem; 73 background-color: var(--bg); 74 transform: rotate(-140deg); 75} 76 77.confetti .rectangle { 78 width: 1rem; 79 height: 0.5rem; 80 background-color: var(--bg); 81} 82 83.confetti .hexagram { 84 width: 0; 85 height: 0; 86 border-left: 0.5rem solid transparent; 87 border-right: 0.5rem solid transparent; 88 border-bottom: 1rem solid var(--bg); 89 position: relative; 90} 91 92.confetti .hexagram:after { 93 content: ""; 94 width: 0; 95 height: 0; 96 border-left: 0.5rem solid transparent; 97 border-right: 0.5rem solid transparent; 98 border-top: 1rem solid var(--bg); 99 position: absolute; 100 top: 0.33rem; 101 left: -0.5rem; 102} 103 104.confetti .pentagram { 105 width: 0rem; 106 height: 0rem; 107 display: block; 108 margin: 0.5rem 0; 109 border-right: 1rem solid transparent; 110 border-bottom: 0.7rem solid var(--bg); 111 border-left: 1rem solid transparent; 112 transform: rotate(35deg); 113 position: relative; 114} 115 116.confetti .pentagram:before { 117 content: ""; 118 width: 0; 119 height: 0; 120 display: block; 121 border-bottom: 0.8rem solid var(--bg); 122 border-left: 0.3rem solid transparent; 123 border-right: 0.3rem solid transparent; 124 transform: rotate(-35deg); 125 position: absolute; 126 top: -0.45rem; 127 left: -0.65rem; 128} 129 130.confetti .pentagram:after { 131 content: ""; 132 width: 0rem; 133 height: 0rem; 134 display: block; 135 border-right: 1rem solid transparent; 136 border-bottom: 0.7rem solid var(--bg); 137 border-left: 1rem solid transparent; 138 transform: rotate(-70deg); 139 position: absolute; 140 top: 0.03rem; 141 left: -1.05rem; 142} 143 144.confetti .dodecagram { 145 background: var(--bg); 146 width: 0.8rem; 147 height: 0.8rem; 148 position: relative; 149} 150 151.confetti .dodecagram:before { 152 content: ""; 153 height: 0.8rem; 154 width: 0.8rem; 155 background: var(--bg); 156 transform: rotate(30deg); 157 position: absolute; 158 top: 0; 159 left: 0; 160} 161 162.confetti .dodecagram:after { 163 content: ""; 164 height: 0.8rem; 165 width: 0.8rem; 166 background: var(--bg); 167 transform: rotate(60deg); 168 position: absolute; 169 top: 0; 170 left: 0; 171} 172 173.confetti .wavy-line { 174 position: relative; 175} 176 177.confetti .wavy-line::after, 178.confetti .wavy-line::before { 179 content: ""; 180 height: 1rem; 181 width: 8rem; 182 background-size: 2rem 1rem; 183 position: absolute; 184 left: -9rem; 185 transform: rotate(90deg); 186} 187 188.confetti .wavy-line::before { 189 background-image: linear-gradient( 190 45deg, 191 transparent, 192 transparent 50%, 193 var(--bg) 50%, 194 transparent 60% 195 ); 196 top: 1rem; 197} 198 199.confetti .wavy-line::after { 200 background-image: linear-gradient( 201 -45deg, 202 transparent, 203 transparent 50%, 204 var(--bg) 50%, 205 transparent 60% 206 ); 207} 208 209.confetti i { 210 width: 3rem; 211 height: 3rem; 212 margin: 0 0.2rem; 213 animation-name: confetti; 214 animation-timing-function: linear; 215 animation-iteration-count: infinite; 216 animation-duration: calc(70s / var(--speed)); 217} 218 219.confetti i:nth-child(even) { 220 transform: rotate(90deg); 221} 222 223@keyframes confetti { 224 0% { 225 transform: translateY(-500px); 226 } 227 228 100% { 229 transform: translateY(500px); 230 } 231} 232
JkHuger
JkHuger
MIT License