{"html":" ","css":".crushbtn {\n font-size: 2rem;\n padding: 0.7rem 2.4rem;\n letter-spacing: .3rem;\n border-radius: 1.5rem;\n position: relative;\n background-color: #e8e8e8;\n color: red;\n border: none;\n text-shadow: 0 0 3px #ff6e6e;\n overflow: hidden;\n cursor: pointer;\n transition: 0.7s;\n z-index: 2;\n}\n\n.heart1 svg {\n position: absolute;\n left: 4.5rem;\n top: 1.8rem;\n opacity: 0;\n fill: red;\n stroke: none;\n transition: 0.7s;\n width: 2rem;\n height: 2rem;\n animation: move1 5s ease-in-out infinite alternate-reverse;\n}\n\n.heart2 svg {\n position: absolute;\n left: 0.8rem;\n opacity: 0;\n top: 0.3rem;\n width: 1.5rem;\n height: 1.5rem;\n fill: red;\n stroke: none;\n transform: rotate(-20deg );\n animation: move2 5s ease infinite alternate-reverse;\n}\n\n.heart3 svg {\n position: absolute;\n right: 1rem;\n top: 0.5rem;\n opacity: 0;\n width: 1.4rem;\n height: 1.4rem;\n transform: rotate(20deg);\n fill: red;\n stroke: none;\n z-index: -1;\n animation: move3 5s ease infinite alternate-reverse;\n}\n\n@keyframes move1 {\n 0% {\n top: 2rem;\n }\n\n 50% {\n top: 4rem;\n }\n\n 100% {\n top: 2rem;\n }\n}\n\n@keyframes move2 {\n 0% {\n top: 0.3rem;\n }\n\n 50% {\n top: 1.5rem;\n }\n\n 100% {\n top: 0.3rem;\n }\n}\n\n@keyframes move3 {\n 0% {\n top: 1.5rem;\n }\n\n 50% {\n top: .6rem;\n }\n\n 100% {\n top: 1.5rem;\n }\n}\n\n.crushbtn:hover .heart1 svg,\n.crushbtn:hover .heart2 svg,\n.crushbtn:hover .heart3 svg {\n opacity: 1;\n filter: drop-shadow(0 0 10px #ff6e6e)\n}\n\n.crushbtn:hover {\n color: red;\n box-shadow: 0 0 10px inset #ff6e6e;\n scale: 105%;\n}\n\n.crushbtn:active {\n scale: 100%;\n}"}

pink-zebra-4

👁 实时预览

📝 源代码