{"html":"\n \n \n \n \n \n \n \n \n

\n \n\n","css":".like-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n position: relative;\n}\n\n.like-btn input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.like-btn svg {\n width: 3rem;\n height: 3rem;\n fill: #000000;\n padding: 10px;\n transition: 0.2s ease all;\n}\n\n#icon-like-regular {\n display: block;\n}\n\n#icon-like-solid {\n display: none;\n}\n\n#like-checkbox:checked ~ #icon-like-regular {\n display: none;\n animation: checked-icon-like 0.5s;\n}\n\n#like-checkbox:checked ~ #icon-like-solid {\n display: block;\n fill: #d7000f;\n animation: checked-icon-like 0.5s;\n}\n\n.fireworks {\n transform: scale(0.4);\n}\n\n#like-checkbox:checked ~ .fireworks > .checked-like-fx {\n position: absolute;\n width: 10px;\n height: 10px;\n right: 40px;\n border-radius: 50%;\n box-shadow:\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff,\n 0 0 #fff;\n animation:\n 1s fireworks-bang ease-out forwards,\n 1s fireworks-gravity ease-in forwards,\n 5s fireworks-position linear forwards;\n animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n@keyframes checked-icon-like {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 50% {\n transform: scale(1.2) rotate(-10deg);\n }\n}\n\n@keyframes fireworks-position {\n 0%,\n 19.9% {\n margin-top: 10%;\n margin-left: 40%;\n }\n 20%,\n 39.9% {\n margin-top: 40%;\n margin-left: 30%;\n }\n 40%,\n 59.9% {\n margin-top: 20%;\n margin-left: 70%;\n }\n 60%,\n 79.9% {\n margin-top: 30%;\n margin-left: 20%;\n }\n 80%,\n 99.9% {\n margin-top: 30%;\n margin-left: 80%;\n }\n}\n\n@keyframes fireworks-gravity {\n to {\n transform: translateY(200px);\n opacity: 0;\n }\n}\n\n@keyframes fireworks-bang {\n to {\n box-shadow:\n 114px -107.3333333333px #8800ff,\n 212px -166.3333333333px #a600ff,\n 197px -6.3333333333px #ff006a,\n 179px -329.3333333333px #3300ff,\n -167px -262.3333333333px #ff0062,\n 233px 65.6666666667px #ff008c,\n 81px 42.6666666667px #0051ff,\n -13px 54.6666666667px #00ff2b,\n -60px -183.3333333333px #0900ff,\n 127px -259.3333333333px #ff00e6,\n 117px -122.3333333333px #00b7ff,\n 95px 20.6666666667px #ff8000,\n 115px 1.6666666667px #0004ff,\n -160px -328.3333333333px #00ff40,\n 69px -242.3333333333px #000dff,\n -208px -230.3333333333px #ff0400,\n 30px -15.3333333333px #e6ff00,\n 235px -15.3333333333px #fb00ff,\n 80px -232.3333333333px #d5ff00,\n 175px -173.3333333333px #00ff3c,\n -187px -176.3333333333px #aaff00,\n 4px 26.6666666667px #ff6f00,\n 227px -106.3333333333px #ff0099,\n 119px 17.6666666667px #00ffd5,\n -102px 4.6666666667px #ff0088,\n -16px -4.3333333333px #00fff7,\n -201px -310.3333333333px #00ffdd,\n 64px -181.3333333333px #f700ff,\n -234px -15.3333333333px #00fffb,\n -184px -263.3333333333px #aa00ff,\n 96px -303.3333333333px #0037ff,\n -139px 10.6666666667px #0026ff,\n 25px -205.3333333333px #00ff2b,\n -129px -322.3333333333px #40ff00,\n -235px -187.3333333333px #26ff00,\n -136px -237.3333333333px #0091ff,\n -82px -321.3333333333px #6a00ff,\n 7px -267.3333333333px #ff00c8,\n -155px 30.6666666667px #0059ff,\n -85px -73.3333333333px #6a00ff,\n 60px -199.3333333333px #55ff00,\n -9px -289.3333333333px #00ffaa,\n -208px -167.3333333333px #00ff80,\n -13px -299.3333333333px #ff0004,\n 179px -164.3333333333px #ff0044,\n -112px 12.6666666667px #0051ff,\n -209px -125.3333333333px #ff00bb,\n 14px -101.3333333333px #00ff95,\n -184px -292.3333333333px #ff0099,\n -26px -168.3333333333px #09ff00,\n 129px -67.3333333333px #0084ff,\n -17px -23.3333333333px #0059ff,\n 129px 34.6666666667px #7300ff,\n 35px -24.3333333333px #ffd900,\n -12px -297.3333333333px #ff8400,\n 129px -156.3333333333px #0dff00,\n 157px -29.3333333333px #1a00ff,\n -221px 6.6666666667px #ff0062,\n 0px -311.3333333333px #ff006a,\n 155px 50.6666666667px #00ffaa,\n -71px -318.3333333333px #0073ff;\n }\n}\n"}

loud-husky-90

👁 实时预览

📝 源代码