3.3K views
1.rating { 2 display: flex; 3 flex-direction: row-reverse; 4 gap: 0.3rem; 5 --stroke: #666; 6 --fill: #ffc73a; 7} 8 9.rating input { 10 appearance: unset; 11} 12 13.rating label { 14 cursor: pointer; 15} 16 17.rating svg { 18 width: 3rem; 19 height: 3rem; 20 overflow: visible; 21 fill: transparent; 22 stroke: var(--stroke); 23 stroke-linejoin: bevel; 24 stroke-dasharray: 12; 25 animation: idle 4s linear infinite; 26 transition: stroke 0.2s, fill 0.5s; 27} 28 29@keyframes idle { 30 from { 31 stroke-dashoffset: 24; 32 } 33} 34 35.rating label:hover svg { 36 stroke: var(--fill); 37} 38 39.rating input:checked ~ label svg { 40 transition: 0s; 41 animation: idle 4s linear infinite, yippee 0.75s backwards; 42 fill: var(--fill); 43 stroke: var(--fill); 44 stroke-opacity: 0; 45 stroke-dasharray: 0; 46 stroke-linejoin: miter; 47 stroke-width: 8px; 48} 49 50@keyframes yippee { 51 0% { 52 transform: scale(1); 53 fill: var(--fill); 54 fill-opacity: 0; 55 stroke-opacity: 1; 56 stroke: var(--stroke); 57 stroke-dasharray: 10; 58 stroke-width: 1px; 59 stroke-linejoin: bevel; 60 } 61 62 30% { 63 transform: scale(0); 64 fill: var(--fill); 65 fill-opacity: 0; 66 stroke-opacity: 1; 67 stroke: var(--stroke); 68 stroke-dasharray: 10; 69 stroke-width: 1px; 70 stroke-linejoin: bevel; 71 } 72 73 30.1% { 74 stroke: var(--fill); 75 stroke-dasharray: 0; 76 stroke-linejoin: miter; 77 stroke-width: 8px; 78 } 79 80 60% { 81 transform: scale(1.2); 82 fill: var(--fill); 83 } 84} 85
MIT License