{"html":"

\n \n \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 transform-style: preserve-3d;\n perspective: 1000px;\n}\n.rating input {\n display: none;\n}\n\n.rating label .svgOne {\n stroke: #ccc;\n fill: rgba(255, 217, 0, 0);\n transition:\n stroke 0.5s ease,\n fill 0.5s ease;\n}\n\n.rating label .svgTwo {\n position: absolute;\n top: -1px;\n fill: gold;\n stroke: rgba(255, 217, 0, 0);\n opacity: 0;\n transition:\n stroke 0.5s ease,\n fill 0.5s ease,\n opacity 0.5s ease;\n}\n\n.rating label {\n position: relative;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 3px;\n transition: all 0.5s ease;\n}\n\n/* Étoiles sélectionnées ou survolées */\n.rating label:hover .svgOne,\n.rating label:hover ~ label .svgOne {\n stroke: gold;\n}\n\n.rating input:checked ~ label .svgOne {\n stroke: #cccccc00;\n}\n\n.rating input:checked ~ label .svgTwo {\n transform: rotateX(0deg) rotateY(0deg) translateY(0px);\n opacity: 1;\n animation: displayStar 0.5s cubic-bezier(0.75, 0.41, 0.82, 1.2);\n}\n\n@keyframes displayStar {\n 0% {\n transform: rotateX(100deg) rotateY(100deg) translateY(10px);\n }\n 100% {\n transform: rotateX(0deg) rotateY(0deg) translateY(0px);\n }\n}\n\n.ombre {\n background: radial-gradient(\n ellipse closest-side,\n rgba(0, 0, 0, 0.24),\n rgba(0, 0, 0, 0)\n );\n width: 30px;\n height: 8px;\n opacity: 0;\n transition: opacity 0.6s ease 0.2s;\n}\n\n/* Étoiles sélectionnées ou survolées */\n.rating label:hover .ombre,\n.rating label:hover ~ label .ombre {\n opacity: 0.3;\n}\n\n.rating input:checked ~ label .ombre {\n opacity: 1;\n}\n\n/* Animation de secousse uniquement au hover */\n.rating label:hover .svgTwo:hover {\n animation:\n chackStar 0.6s ease-out,\n displayStar none 1s;\n}\n\n@keyframes chackStar {\n 0% {\n transform: rotate(0deg);\n }\n 20% {\n transform: rotate(-20deg);\n }\n 50% {\n transform: rotate(20deg);\n }\n 80% {\n transform: rotate(-20deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n"}

short-hound-89

👁 实时预览

📝 源代码