{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

","css":".rating {\n display: flex;\n flex-direction: row-reverse;\n gap: 0.3rem;\n --stroke: #666;\n --fill: #ffc73a;\n}\n\n.rating input {\n appearance: unset;\n}\n\n.rating label {\n cursor: pointer;\n}\n\n.rating svg {\n width: 2rem;\n height: 2rem;\n overflow: visible;\n fill: transparent;\n stroke: var(--stroke);\n stroke-linejoin: bevel;\n stroke-dasharray: 12;\n animation: idle 4s linear infinite;\n transition: stroke 0.2s, fill 0.5s;\n}\n\n@keyframes idle {\n from {\n stroke-dashoffset: 24;\n }\n}\n\n.rating label:hover svg {\n stroke: var(--fill);\n}\n\n.rating input:checked ~ label svg {\n transition: 0s;\n animation: idle 4s linear infinite, yippee 0.75s backwards;\n fill: var(--fill);\n stroke: var(--fill);\n stroke-opacity: 0;\n stroke-dasharray: 0;\n stroke-linejoin: miter;\n stroke-width: 8px;\n}\n\n@keyframes yippee {\n 0% {\n transform: scale(1);\n fill: var(--fill);\n fill-opacity: 0;\n stroke-opacity: 1;\n stroke: var(--stroke);\n stroke-dasharray: 10;\n stroke-width: 1px;\n stroke-linejoin: bevel;\n }\n\n 30% {\n transform: scale(0);\n fill: var(--fill);\n fill-opacity: 0;\n stroke-opacity: 1;\n stroke: var(--stroke);\n stroke-dasharray: 10;\n stroke-width: 1px;\n stroke-linejoin: bevel;\n }\n\n 30.1% {\n stroke: var(--fill);\n stroke-dasharray: 0;\n stroke-linejoin: miter;\n stroke-width: 8px;\n }\n\n 60% {\n transform: scale(1.2);\n fill: var(--fill);\n }\n}\n"}

selfish-starfish-40

👁 实时预览

📝 源代码