{"html":"\n \n

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

\n\n","css":".star {\n --star-color: rgb(250, 190, 21);\n position: relative;\n width: 64px; /* Increased from 50px */\n height: 64px; /* Increased from 50px */\n transition: transform 0.3s ease;\n cursor: pointer;\n}\n\n.star .checkbox {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n z-index: 20;\n cursor: pointer;\n}\n\n.star .svg-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.star .svg-outline,\n.star .svg-filled {\n fill: var(--star-color);\n position: absolute;\n width: 100%;\n height: 100%;\n transition: all 0.3s ease;\n}\n\n.star .svg-filled {\n animation: keyframes-svg-filled 1s;\n opacity: 0;\n transform: scale(0);\n}\n\n.star .svg-celebrate {\n position: absolute;\n display: none;\n stroke: var(--star-color);\n fill: var(--star-color);\n stroke-width: 2px;\n}\n\n.star .particle {\n position: absolute;\n animation-fill-mode: forwards;\n display: none;\n}\n\n.star .checkbox:checked ~ .svg-container .svg-outline {\n opacity: 0;\n}\n\n.star .checkbox:checked ~ .svg-container .svg-filled {\n opacity: 1;\n transform: scale(1);\n}\n\n.star .checkbox:not(:checked) ~ .svg-container .svg-filled {\n animation: keyframes-svg-unfilled 0.3s forwards;\n}\n\n.star .checkbox:checked ~ .svg-container .svg-celebrate {\n display: block;\n}\n\n.star .checkbox:checked ~ .svg-container .particle {\n display: block;\n}\n\n.star .particle:nth-child(1) {\n animation: particle-1 1s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.star .particle:nth-child(2) {\n animation: particle-2 1s ease-out;\n}\n.star .particle:nth-child(3) {\n animation: particle-3 1s ease-out;\n}\n.star .particle:nth-child(4) {\n animation: particle-4 1s ease-out;\n}\n.star .particle:nth-child(5) {\n animation: particle-5 1s ease-out;\n}\n.star .particle:nth-child(6) {\n animation: particle-6 1s ease-out;\n}\n.star .particle:nth-child(7) {\n animation: particle-7 1s ease-out;\n}\n.star .particle:nth-child(8) {\n animation: particle-8 1s ease-out;\n}\n\n@keyframes keyframes-svg-filled {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 25% {\n transform: scale(1.2);\n opacity: 1;\n }\n 50% {\n transform: scale(1);\n filter: brightness(1.5);\n }\n}\n\n@keyframes keyframes-svg-unfilled {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-1 {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n }\n 40% {\n transform: translate(-20px, -25px) scale(0.6);\n opacity: 0.6;\n }\n 100% {\n transform: translate(-40px, 40px) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-2 {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n }\n 40% {\n transform: translate(20px, -25px) scale(0.6);\n opacity: 0.6;\n }\n 100% {\n transform: translate(40px, 40px) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-3 {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n }\n 40% {\n transform: translate(-30px, -20px) scale(0.6);\n opacity: 0.6;\n }\n 100% {\n transform: translate(-50px, 45px) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-4 {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n }\n 40% {\n transform: translate(30px, -20px) scale(0.6);\n opacity: 0.6;\n }\n 100% {\n transform: translate(50px, 45px) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-5 {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n }\n 45% {\n transform: translate(0, -30px) scale(0.6);\n opacity: 0.6;\n }\n 100% {\n transform: translate(0, 40px) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-6 {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n }\n 35% {\n transform: translate(-35px, -15px) scale(0.6);\n opacity: 0.6;\n }\n 100% {\n transform: translate(-60px, 50px) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-7 {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n }\n 35% {\n transform: translate(35px, -15px) scale(0.6);\n opacity: 0.6;\n }\n 100% {\n transform: translate(60px, 50px) scale(0);\n opacity: 0;\n }\n}\n\n@keyframes particle-8 {\n 0% {\n transform: translate(0, 0) scale(1);\n opacity: 1;\n }\n 45% {\n transform: translate(0, -35px) scale(0.6);\n opacity: 0.6;\n }\n 100% {\n transform: translate(0, 45px) scale(0);\n opacity: 0;\n }\n}\n"}

curly-ladybug-43

👁 实时预览

📝 源代码