{"html":"

","css":".rating {\n cursor: pointer;\n}\n\n.card {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin: auto;\n -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);\n box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);\n background-color: rgb(255, 255, 255);\n padding: 0.8rem;\n width: 33rem;\n}\n\n.rating-container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0.4rem 0.8rem;\n width: 100%;\n}\n\n.rating {\n background-color: rgba(0, 0, 16, 0.8);\n padding: 0.4rem 0.4rem 0.1rem 0.4rem;\n border-radius: 2.2rem;\n}\n\n.rating-form {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.svg {\n fill: rgb(242, 242, 242);\n height: 3.6rem;\n width: 3.6rem;\n margin: 0.2rem;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.rating-form-2 svg {\n height: 3rem;\n width: 3rem;\n margin: 0.5rem;\n}\n\n#radios label {\n position: relative;\n}\n\n.super-happy, [type=\"radio\"] {\n position: absolute;\n opacity: 0;\n}\n\n.input ,[type=\"radio\"] + svg {\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n}\n\n.super-happy[class=\"super-happy\"]:hover + svg,\n.super-happy[class=\"super-happy\"]:checked + svg,\n.super-happy[class=\"super-happy\"]:focus + svg {\n fill: rgb(0, 204, 79);\n transition: 1.5s;\n}\n\n.neutral[class=\"neutral\"]:hover + svg,\n.neutral[class=\"neutral\"]:checked + svg,\n.neutral[class=\"neutral\"]:focus + svg {\n fill: rgb(232, 214, 0);\n transition: 1.5s;\n}\n\n.super-sad[class=\"super-sad\"]:hover + svg,\n.super-sad[class=\"super-sad\"]:checked + svg,\n.super-sad[class=\"super-sad\"]:focus + svg {\n fill: rgb(239, 42, 16);\n transition: 1.5s;\n}\n\n\n"}

silly-insect-34

👁 实时预览

📝 源代码