{"html":"

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

\n 0\n 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n

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

\n","css":".container {\n --col-gray: #3f3f3f;\n --col-white: #fff;\n --col-like: #2196f3;\n --col-dislike: #ff3232;\n --transition: 350ms;\n background-color: var(--col-gray);\n width: 130px;\n border-radius: 50px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 9px;\n user-select: none;\n /*you can easlly change the number by using this variabels*/\n --zero: translateY(calc(50% - 11px));\n --one: translateY(calc(40% - 11px));\n --two: translateY(calc(30% - 11px));\n --three: translateY(calc(20% - 11px));\n --four: translateY(calc(10% - 11px));\n --five: translateY(calc(0% - 11px));\n --six: translateY(calc(-10% - 11px));\n --seven: translateY(calc(-20% - 11px));\n --eight: translateY(calc(-30% - 11px));\n --nine: translateY(calc(-40% - 11px));\n --ten: translateY(calc(-50% - 11px));\n}\n.container:has(#like:checked) .count {\n border-left-color: var(--col-like);\n border-right-color: transparent;\n}\n.container:has(#like:checked) .count .number:first-child {\n /*change first number from here*/\n /*when click on like*/\n transform: var(--nine);\n}\n.container:has(#like:checked) .count .number:nth-child(2) {\n /*change second number from here*/\n /*when click on like*/\n transform: var(--five);\n}\n.container:has(#like:checked) .count .number:last-child {\n /*change third number from here*/\n /*when click on like*/\n transform: var(--three);\n}\n.container:has(#dislike:checked) > .count {\n border-right-color: var(--col-dislike);\n border-left-color: transparent;\n}\n.container:has(#dislike:checked) > .count .number:first-child {\n /*change first number from here*/\n /*when click on dislike*/\n transform: var(--zero);\n}\n.container:has(#dislike:checked) > .count .number:nth-child(2) {\n /*change second number from here*/\n /*when click on dislike*/\n transform: var(--zero);\n}\n.container:has(#dislike:checked) > .count .number:last-child {\n /*change third number from here*/\n /*when click on dislike*/\n transform: var(--nine);\n}\n.container label input {\n display: none;\n}\n.container #like:checked + svg {\n animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;\n fill: var(--col-like);\n}\n.container #dislike:checked + svg {\n animation: evaluation-animation var(--transition) ease-in-out 0s 1 normal both;\n fill: var(--col-dislike);\n}\n.container .icon {\n cursor: pointer;\n fill: var(--col-white);\n height: 24px;\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.container .icon.like {\n margin-left: 9px;\n}\n.container .icon.dislike {\n margin-right: 9px;\n}\n.container .count {\n transition: var(--transition);\n flex: 1;\n border-left: 1px solid var(--col-white);\n border-right: 1px solid var(--col-white);\n position: relative;\n height: 24px;\n overflow: hidden;\n margin: auto;\n color: white;\n font-size: 16px;\n font-family: sans-serif;\n display: flex;\n align-items: center;\n\n justify-content: center;\n gap: 0.5px;\n flex-direction: row;\n}\n.container .count .number {\n display: flex;\n flex-direction: column;\n transform: translateY(calc(50% - 8px));\n transition: 1000ms cubic-bezier(0.68, -0.55, 0.27, 1.55);\n}\n.container .count .number:first-child {\n transition-delay: 200ms;\n}\n.container .count .number:nth-child(2) {\n transition-delay: 150ms;\n}\n.container .count .number:last-child {\n transition-delay: 50ms;\n}\n\n@keyframes evaluation-animation {\n 0%,\n 100% {\n transform: scale(1) rotate(0deg);\n }\n 50% {\n transform: scale(1.1) rotate(-10deg);\n }\n}\n"}

tough-deer-65

👁 实时预览

📝 源代码