{"html":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n","css":"/* design inspired by icon from thenounproject.com */\n\n.reduceMotionToggle {\n width: 4em;\n height: auto;\n color: #bbb;\n}\n\n.st-reduceMotionToggleBtn {\n position: relative;\n cursor: pointer;\n}\n\n.st-reduceMotionToggleBtn .reduceMotionToggleInput {\n opacity: 0;\n width: inherit;\n aspect-ratio: 1;\n}\n\n.st-reduceMotionToggleBtn svg {\n position: absolute;\n left: 0;\n width: inherit;\n height: inherit;\n}\n.st-reduceMotionToggleBtn svg .line {\n transform: scaleX(0);\n}\n\n.st-reduceMotionToggleBtn\n .reduceMotionToggleInput:not(:checked)\n + svg\n .ballTrace {\n animation: ballTrace_toggleMotionOff9371A 0.3s ease 0s 1 forwards,\n ballTrace_toggleMotionOff9371B 0.1s steps(2, end)\n calc(0.32s + var(--_appearOffset)) 1 forwards;\n}\n.st-reduceMotionToggleBtn .reduceMotionToggleInput:not(:checked) + svg .ball {\n animation: ball_toggleMotionOn9371A 0.3s ease 0s 1 forwards,\n ball_toggleMotionOn9371B 0.4s cubic-bezier(0.165, 0.84, 0.45, 1.11) 0.3s 1\n forwards;\n}\n\n.st-reduceMotionToggleBtn .reduceMotionToggleInput:checked + svg circle {\n animation: ball_toggleMotionOff9371 0.9s linear 0s 1 forwards;\n}\n\n.st-reduceMotionToggleBtn .reduceMotionToggleInput:checked + svg .line {\n animation: line_toggleMotionOff9371 0.32s cubic-bezier(0.075, 0.82, 0.165, 1)\n 0.47s 1 forwards;\n}\n\n@keyframes ball_toggleMotionOff9371 {\n 0% {\n transform: translateX(0px);\n }\n 6.66% {\n transform: translateX(calc(var(--_toCenterXOffset) * 0.45));\n }\n 13.33% {\n transform: translateX(calc(var(--_toCenterXOffset) * 0.77));\n }\n 20% {\n transform: translateX(calc(var(--_toCenterXOffset) * 0.9));\n }\n 26.66% {\n transform: translateX(calc(var(--_toCenterXOffset) * 0.94));\n }\n 33.33% {\n transform: translate(calc(var(--_toCenterXOffset) * 0.965 + 1px), 2px);\n }\n 35% {\n transform: translate(calc(var(--_toCenterXOffset) * 0.988), 1px);\n }\n 37% {\n transform: translate(calc(var(--_toCenterXOffset) * 0.991 + 1px), -1px);\n }\n 39% {\n transform: translate(calc(var(--_toCenterXOffset) * 0.995 - 1px), -2px);\n }\n 41% {\n transform: translate(calc(var(--_toCenterXOffset) * 0.999 + 1px), -1px);\n }\n 43% {\n transform: translate(calc(var(--_toCenterXOffset) * 0.75), 1px);\n }\n 45% {\n transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);\n }\n 100% {\n transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);\n }\n}\n\n@keyframes line_toggleMotionOff9371 {\n 0% {\n transform: scaleY(0);\n }\n 100% {\n transform: scaleY(1);\n }\n}\n\n@keyframes ball_toggleMotionOn9371A {\n 0% {\n transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);\n }\n 100% {\n transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);\n }\n}\n\n@keyframes ball_toggleMotionOn9371B {\n 0% {\n transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);\n }\n 100% {\n transform: translate(0px, 0px);\n }\n}\n\n@keyframes ballTrace_toggleMotionOff9371A {\n 0% {\n opacity: 1;\n transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);\n }\n 99.9% {\n opacity: 1;\n transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);\n }\n 100% {\n opacity: 0;\n transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);\n }\n}\n@keyframes ballTrace_toggleMotionOff9371B {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px);\n }\n 100% {\n opacity: 1;\n transform: translate(0px, 0px);\n }\n}\n"}

smart-fox-47

👁 实时预览

📝 源代码