{"html":"

\n \n \n \n \n \n Likes\n \n 68\n 69\n

\n","css":"#heart {\n display: none;\n}\n\n.like-button {\n position: relative;\n cursor: pointer;\n display: flex;\n height: 48px;\n width: 136px;\n border-radius: 16px;\n border: none;\n background-color: #1d1d1d;\n overflow: hidden;\n box-shadow:\n inset -2px -2px 5px rgba(255, 255, 255, 0.2),\n inset 2px 2px 5px rgba(0, 0, 0, 0.1),\n 4px 4px 10px rgba(0, 0, 0, 0.4),\n -2px -2px 8px rgba(255, 255, 255, 0.1);\n}\n\n.like {\n width: 70%;\n height: 100%;\n display: flex;\n cursor: pointer;\n align-items: center;\n justify-content: space-evenly;\n}\n\n.like-icon {\n fill: #505050;\n height: 28px;\n width: 28px;\n}\n\n.like-text {\n color: #fcfcfc;\n font-size: 16px;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.like-count {\n position: absolute;\n right: 0;\n width: 30%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #717070;\n font-size: 16px;\n border-left: 2px solid #4e4e4e;\n transition: all 0.5s ease-out;\n}\n\n.like-count.two {\n transform: translateY(40px);\n}\n\n.on:checked ~ .like .like-icon {\n fill: #fc4e4e;\n animation: enlarge 0.2s ease-out 1;\n transition: all 0.2s ease-out;\n}\n\n.on:checked ~ .like-count.two {\n transform: translateX(0);\n color: #fcfcfc;\n}\n\n.on:checked ~ .like-count.one {\n transform: translateY(-40px);\n}\n\n@keyframes enlarge {\n 0% {\n transform: scale(0.5);\n }\n 100% {\n transform: scale(1.2);\n }\n}\n"}

popular-puma-87

👁 实时预览

📝 源代码