410 views
CSSAdd prefixes
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 + svg, 40.rating label:has(input:checked) ~ label svg { 41 transition: 0s; 42 /* Hopefully firefox gets :has support soon w/o feature flag */ 43 animation: idle 4s linear infinite, yippee 0.75s backwards; 44 fill: var(--fill); 45 stroke: var(--fill); 46 stroke-opacity: 0; 47 stroke-dasharray: 0; 48 stroke-linejoin: miter; 49 stroke-width: 8px; 50} 51 52@keyframes yippee { 53 0% { 54 transform: scale(1); 55 fill: var(--fill); 56 fill-opacity: 0; 57 stroke-opacity: 1; 58 stroke: var(--stroke); 59 stroke-dasharray: 10; 60 stroke-width: 1px; 61 stroke-linejoin: bevel; 62 } 63 64 30% { 65 transform: scale(0); 66 fill: var(--fill); 67 fill-opacity: 0; 68 stroke-opacity: 1; 69 stroke: var(--stroke); 70 stroke-dasharray: 10; 71 stroke-width: 1px; 72 stroke-linejoin: bevel; 73 } 74 75 30.1% { 76 stroke: var(--fill); 77 stroke-dasharray: 0; 78 stroke-linejoin: miter; 79 stroke-width: 8px; 80 } 81 82 60% { 83 transform: scale(1.2); 84 fill: var(--fill); 85 } 86} 87
HTML
1<div class="rating"> 2 <label for="star-1"> 3 <input type="radio" id="star-1" name="star-radio" value="star-1"> 4 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg> 5 </label> 6 <label for="star-2"> 7 <input type="radio" id="star-2" name="star-radio" value="star-1"> 8 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg> 9 </label> 10 <label for="star-3"> 11 <input type="radio" id="star-3" name="star-radio" value="star-1"> 12 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg> 13 </label> 14 <label for="star-4"> 15 <input type="radio" id="star-4" name="star-radio" value="star-1"> 16 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg> 17 </label> 18 <label for="star-5"> 19 <input type="radio" id="star-5" name="star-radio" value="star-1"> 20 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path pathLength="360" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg> 21 </label> 22</div>