{"html":"\n

\n \n

\n \n \n \n

","css":".container {\n height: 100%;\n background: #f4f4f4;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n\n.title {\n height: 25%;\n font-family: Cookie;\n font-size: 48pt;\n text-align: center;\n}\n\n.switch {\n --cookie-size: 3em;\n --outer-border: 0.5em;\n --inner-border: 0.5em;\n --border-color: #d8a04d;\n --height: calc(var(--cookie-size) + (2 * (var(--outer-border) + var(--inner-border))));\n --width: calc(var(--height) * 2);\n position: relative;\n width: var(--width);\n height: var(--height);\n}\n\n.switch input {\n display: none;\n}\n\n.switch label {\n cursor: pointer;\n}\n\n.switch input:checked ~ .cookie {\n transform: translateX(calc(var(--width) / 2)) rotate(360deg);\n color: #d8a04d;\n background-color: currentColor;\n}\n\n.switch input:checked ~ .cookie span[class^=\"cookie-part-\"],\n.switch input:checked ~ .cookie span[class^=\"chocolate-chips-\"] {\n transform: translate(0px, 0px);\n}\n\n.background {\n height: 100%;\n border-radius: calc(var(--width) / 4);\n border: var(--outer-border) solid var(--border-color);\n background: linear-gradient(to right, #484848 0%,#202020 100%);\n}\n\n.cookie {\n --chip-size: calc(var(--cookie-size) / 8);\n --split-offset: calc(var(--cookie-size) / 24);\n position: absolute;\n top: calc(var(--outer-border) + var(--inner-border));\n left: calc(var(--outer-border) + var(--inner-border));\n ;\n width: var(--cookie-size);\n height: var(--cookie-size);\n border-radius: 50%;\n transition: transform 1s linear;\n}\n\n.cookie span[class^=\"cookie-part-\"] {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n color: #d8a04d;\n background-color: currentColor;\n}\n\n.cookie-part-1 {\n clip-path: polygon(0% 0%, 55% 0%, 52% 8%, 55% 10%, 55% 16%, 52% 19%, 52% 24%, 47% 26%, 45% 30%, 50% 33%, 47% 37%, 47% 42%, 51% 47%, 47% 49%, 40% 50%, 34% 50%, 30% 53%, 25% 53%, 20% 56%, 16% 56%, 14% 61%, 0% 60%);\n transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * -1));\n}\n\n.cookie-part-2 {\n clip-path: polygon(55% 0%, 100% 0%, 100% 72%, 88% 68%, 84% 61%, 78% 60%, 77% 56%, 75% 53%, 71% 55%, 66% 50%, 63% 47%, 58% 49%, 56% 44%, 51% 47%, 47% 42%, 47% 37%, 50% 33%, 45% 30%, 47% 26%, 52% 24%, 52% 19%, 55% 16%, 55% 10%, 52% 8%);\n transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * -1));\n}\n\n.cookie-part-3 {\n clip-path: polygon(0% 60%, 14% 61%, 16% 56%, 20% 56%, 25% 53%, 30% 53%, 34% 50%, 40% 50%, 47% 49%, 51% 47%, 55% 53%, 60% 56%, 56% 62%, 53% 67%, 57% 72%, 57% 81%, 57% 87%, 63% 92%, 60% 100%, 0% 100%);\n transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * 1));\n}\n\n.cookie-part-4 {\n clip-path: polygon(100% 100%, 100% 72%, 88% 68%, 84% 61%, 78% 60%, 77% 56%, 75% 53%, 71% 55%, 66% 50%, 63% 47%, 58% 49%, 56% 44%, 51% 47%, 55% 53%, 60% 56%, 56% 62%, 53% 67%, 57% 72%, 57% 81%, 57% 87%, 63% 92%, 60% 100%);\n transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * 1));\n}\n\n.cookie span[class^=\"chocolate-chips-\"] {\n position: absolute;\n color: #754e27;\n background-color: #865729;\n height: var(--chip-size);\n width: var(--chip-size);\n border-radius: 50%;\n box-shadow: inset -0.35em 0;\n}\n\n.cookie .chocolate-chips-1a {\n top: 41%;\n left: 5%;\n}\n\n.cookie .chocolate-chips-1b {\n top: 20%;\n left: 18%;\n}\n\n.cookie .chocolate-chips-1c {\n top: 35%;\n left: 33%;\n}\n\n.cookie .chocolate-chips-1d {\n top: 6%;\n left: 39%;\n}\n\n.cookie .chocolate-chips-2a {\n --chip-size: calc(var(--cookie-size) / 10);\n top: 24%;\n right: 35%;\n}\n\n.cookie .chocolate-chips-2b {\n top: 36%;\n right: 23%;\n}\n\n.cookie .chocolate-chips-2c {\n top: 7%;\n right: 29%;\n}\n\n.cookie .chocolate-chips-2d {\n top: 42%;\n right: 7%;\n}\n\n.cookie .chocolate-chips-2e {\n top: 19%;\n right: 12%;\n}\n\n.cookie .chocolate-chips-3a {\n --chip-size: calc(var(--cookie-size) / 6);\n bottom: 24%;\n left: 18%;\n}\n\n.cookie .chocolate-chips-3b {\n bottom: 34%;\n left: 42%;\n}\n\n.cookie .chocolate-chips-3c {\n bottom: 9%;\n left: 39%;\n}\n\n.cookie .chocolate-chips-4a {\n bottom: 27%;\n right: 29%;\n}\n\n.cookie .chocolate-chips-4b {\n bottom: 12%;\n right: 23%;\n}\n\n.cookie .chocolate-chips-4c {\n --chip-size: calc(var(--cookie-size) / 12);\n bottom: 28%;\n right: 17%;\n}\n\n.cookie span[class^=\"chocolate-chips-1\"] {\n transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * -1));\n}\n\n.cookie span[class^=\"chocolate-chips-2\"] {\n transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * -1));\n}\n\n.cookie span[class^=\"chocolate-chips-3\"] {\n transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * 1));\n}\n\n.cookie span[class^=\"chocolate-chips-4\"] {\n transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * 1));\n}\n"}

empty-chipmunk-58

👁 实时预览

📝 源代码