{"html":"

\n \n \n

\n \n \n \n

\n \n \n

\n \n

\n\n\n","css":".feedback {\n --normal: #414052;\n --normal-shadow: #313140;\n --normal-shadow-top: #4c4b60;\n --normal-mouth: #2e2e3d;\n --normal-eye: #282734;\n --active: #f8da69;\n --active-shadow: #f4b555;\n --active-shadow-top: #fff6d3;\n --active-mouth: #f05136;\n --active-eye: #313036;\n --active-tear: #76b5e7;\n --active-shadow-angry: #e94f1d;\n --hover: #454456;\n --hover-shadow-top: #59586b;\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n}\n.feedback label {\n position: relative;\n transition: transform 0.3s;\n cursor: pointer;\n}\n.feedback label:not(:last-child) {\n margin-right: 20px;\n}\n.feedback label input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n border: none;\n display: block;\n position: absolute;\n width: 40px;\n height: 40px;\n left: 0;\n top: 0;\n margin: 0;\n padding: 0;\n border-radius: 50%;\n background: var(--sb, var(--normal));\n box-shadow:\n inset 3px -3px 4px var(--sh, var(--normal-shadow)),\n inset -1px 1px 2px var(--sht, var(--normal-shadow-top));\n transition:\n background 0.4s,\n box-shadow 0.4s,\n transform 0.3s;\n -webkit-tap-highlight-color: transparent;\n}\n.feedback label div {\n width: 40px;\n height: 40px;\n position: relative;\n transform: perspective(240px) translateZ(4px);\n}\n.feedback label div svg,\n.feedback label div:before,\n.feedback label div:after {\n display: block;\n position: absolute;\n left: var(--l, 9px);\n top: var(--t, 13px);\n width: var(--w, 8px);\n height: var(--h, 1px);\n transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)) translateZ(0);\n}\n.feedback label div svg {\n fill: none;\n stroke: var(--s);\n stroke-width: 1.5px;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: stroke 0.4s;\n}\n.feedback label div svg.eye {\n --s: var(--e, var(--normal-eye));\n --t: 17px;\n --w: 7px;\n --h: 4px;\n}\n.feedback label div svg.eye.right {\n --l: 23px;\n}\n.feedback label div svg.mouth {\n --s: var(--m, var(--normal-mouth));\n --l: 11px;\n --t: 23px;\n --w: 18px;\n --h: 7px;\n}\n.feedback label div:before,\n.feedback label div:after {\n content: \"\";\n z-index: var(--zi, 1);\n border-radius: var(--br, 1px);\n background: var(--b, var(--e, var(--normal-eye)));\n transition: background 0.4s;\n}\n.feedback label.angry {\n --step-1-rx: -24deg;\n --step-1-ry: 20deg;\n --step-2-rx: -24deg;\n --step-2-ry: -20deg;\n}\n.feedback label.angry div:before {\n --r: 20deg;\n}\n.feedback label.angry div:after {\n --l: 23px;\n --r: -20deg;\n}\n.feedback label.angry div svg.eye {\n stroke-dasharray: 4.55;\n stroke-dashoffset: 8.15;\n}\n.feedback label.angry input:checked {\n -webkit-animation: angry 1s linear;\n animation: angry 1s linear;\n}\n.feedback label.angry input:checked + div:before {\n --middle-y: -2px;\n --middle-r: 22deg;\n -webkit-animation: toggle 0.8s linear forwards;\n animation: toggle 0.8s linear forwards;\n}\n.feedback label.angry input:checked + div:after {\n --middle-y: 1px;\n --middle-r: -18deg;\n -webkit-animation: toggle 0.8s linear forwards;\n animation: toggle 0.8s linear forwards;\n}\n.feedback label.sad {\n --step-1-rx: 20deg;\n --step-1-ry: -12deg;\n --step-2-rx: -18deg;\n --step-2-ry: 14deg;\n}\n.feedback label.sad div:before,\n.feedback label.sad div:after {\n --b: var(--active-tear);\n --sc: 0;\n --w: 5px;\n --h: 5px;\n --t: 15px;\n --br: 50%;\n}\n.feedback label.sad div:after {\n --l: 25px;\n}\n.feedback label.sad div svg.eye {\n --t: 16px;\n}\n.feedback label.sad div svg.mouth {\n --t: 24px;\n stroke-dasharray: 9.5;\n stroke-dashoffset: 33.25;\n}\n.feedback label.sad input:checked + div:before,\n.feedback label.sad input:checked + div:after {\n -webkit-animation: tear 0.6s linear forwards;\n animation: tear 0.6s linear forwards;\n}\n.feedback label.ok {\n --step-1-rx: 4deg;\n --step-1-ry: -22deg;\n --step-1-rz: 6deg;\n --step-2-rx: 4deg;\n --step-2-ry: 22deg;\n --step-2-rz: -6deg;\n}\n.feedback label.ok div:before {\n --l: 12px;\n --t: 17px;\n --h: 4px;\n --w: 4px;\n --br: 50%;\n box-shadow: 12px 0 0 var(--e, var(--normal-eye));\n}\n.feedback label.ok div:after {\n --l: 13px;\n --t: 26px;\n --w: 14px;\n --h: 2px;\n --br: 1px;\n --b: var(--m, var(--normal-mouth));\n}\n.feedback label.ok input:checked + div:before {\n --middle-s-y: 0.35;\n -webkit-animation: toggle 0.2s linear forwards;\n animation: toggle 0.2s linear forwards;\n}\n.feedback label.ok input:checked + div:after {\n --middle-s-x: 0.5;\n -webkit-animation: toggle 0.7s linear forwards;\n animation: toggle 0.7s linear forwards;\n}\n.feedback label.good {\n --step-1-rx: -14deg;\n --step-1-rz: 10deg;\n --step-2-rx: 10deg;\n --step-2-rz: -8deg;\n}\n.feedback label.good div:before {\n --b: var(--m, var(--normal-mouth));\n --w: 5px;\n --h: 5px;\n --br: 50%;\n --t: 22px;\n --zi: 0;\n opacity: 0.5;\n box-shadow: 16px 0 0 var(--b);\n filter: blur(2px);\n}\n.feedback label.good div:after {\n --sc: 0;\n}\n.feedback label.good div svg.eye {\n --t: 15px;\n --sc: -1;\n stroke-dasharray: 4.55;\n stroke-dashoffset: 8.15;\n}\n.feedback label.good div svg.mouth {\n --t: 22px;\n --sc: -1;\n stroke-dasharray: 13.3;\n stroke-dashoffset: 23.75;\n}\n.feedback label.good input:checked + div svg.mouth {\n --middle-y: 1px;\n --middle-s: -1;\n -webkit-animation: toggle 0.8s linear forwards;\n animation: toggle 0.8s linear forwards;\n}\n.feedback label.happy div {\n --step-1-rx: 18deg;\n --step-1-ry: 24deg;\n --step-2-rx: 18deg;\n --step-2-ry: -24deg;\n}\n.feedback label.happy div:before {\n --sc: 0;\n}\n.feedback label.happy div:after {\n --b: var(--m, var(--normal-mouth));\n --l: 11px;\n --t: 23px;\n --w: 18px;\n --h: 8px;\n --br: 0 0 8px 8px;\n}\n.feedback label.happy div svg.eye {\n --t: 14px;\n --sc: -1;\n}\n.feedback label.happy input:checked + div:after {\n --middle-s-x: 0.95;\n --middle-s-y: 0.75;\n -webkit-animation: toggle 0.8s linear forwards;\n animation: toggle 0.8s linear forwards;\n}\n.feedback label input:checked {\n --sb: var(--active);\n --sh: var(--active-shadow);\n --sht: var(--active-shadow-top);\n}\n.feedback label input:checked + div {\n --m: var(--active-mouth);\n --e: var(--active-eye);\n -webkit-animation: shake 0.8s linear forwards;\n animation: shake 0.8s linear forwards;\n}\n.feedback label input:not(:checked):hover {\n --sb: var(--hover);\n --sht: var(--hover-shadow-top);\n}\n.feedback label input:not(:checked):active {\n transform: scale(0.925);\n}\n.feedback label input:not(:checked):active + div {\n transform: scale(0.925);\n}\n.feedback label:hover {\n transform: scale(1.08);\n}\n\n@-webkit-keyframes shake {\n 30% {\n transform: perspective(240px) rotateX(var(--step-1-rx, 0deg))\n rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg))\n translateZ(10px);\n }\n 60% {\n transform: perspective(240px) rotateX(var(--step-2-rx, 0deg))\n rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg))\n translateZ(10px);\n }\n 100% {\n transform: perspective(240px) translateZ(4px);\n }\n}\n\n@keyframes shake {\n 30% {\n transform: perspective(240px) rotateX(var(--step-1-rx, 0deg))\n rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg))\n translateZ(10px);\n }\n 60% {\n transform: perspective(240px) rotateX(var(--step-2-rx, 0deg))\n rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg))\n translateZ(10px);\n }\n 100% {\n transform: perspective(240px) translateZ(4px);\n }\n}\n@-webkit-keyframes tear {\n 0% {\n opacity: 0;\n transform: translateY(-2px) scale(0) translateZ(0);\n }\n 50% {\n transform: translateY(12px) scale(0.6, 1.2) translateZ(0);\n }\n 20%,\n 80% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1)\n translateZ(0);\n }\n}\n@keyframes tear {\n 0% {\n opacity: 0;\n transform: translateY(-2px) scale(0) translateZ(0);\n }\n 50% {\n transform: translateY(12px) scale(0.6, 1.2) translateZ(0);\n }\n 20%,\n 80% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1)\n translateZ(0);\n }\n}\n@-webkit-keyframes toggle {\n 50% {\n transform: translateY(var(--middle-y, 0))\n scale(\n var(--middle-s-x, var(--middle-s, 1)),\n var(--middle-s-y, var(--middle-s, 1))\n )\n rotate(var(--middle-r, 0deg));\n }\n}\n@keyframes toggle {\n 50% {\n transform: translateY(var(--middle-y, 0))\n scale(\n var(--middle-s-x, var(--middle-s, 1)),\n var(--middle-s-y, var(--middle-s, 1))\n )\n rotate(var(--middle-r, 0deg));\n }\n}\n@-webkit-keyframes angry {\n 40% {\n background: var(--active);\n }\n 45% {\n box-shadow:\n inset 3px -3px 4px var(--active-shadow),\n inset 0 8px 10px var(--active-shadow-angry);\n }\n}\n@keyframes angry {\n 40% {\n background: var(--active);\n }\n 45% {\n box-shadow:\n inset 3px -3px 4px var(--active-shadow),\n inset 0 8px 10px var(--active-shadow-angry);\n }\n}\n"}

lovely-otter-20

👁 实时预览

📝 源代码