{"html":"\n","css":"button {\n position: relative;\n padding: 20px 20px;\n background: #ff4081;\n font-size: 17px;\n font-weight: 900;\n color: #fff;\n border: none;\n border-radius: 15px;\n transition: all 0.3s ease-in-out;\n}\n\n.icon-1 {\n position: absolute;\n top: 10%;\n left: 30%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all 0.5s ease-in-out;\n z-index: -1;\n}\n\n.icon-1 svg {\n width: 52px;\n height: 16px;\n transition: all 0.5s ease-in-out;\n}\n\n.icon-2 svg {\n width: 16px;\n height: 12px;\n transition: all 0.5s ease-in-out;\n}\n\nbutton:hover .icon-1 svg {\n width: 152px;\n height: 116px;\n}\n\nbutton:hover .icon-2 svg {\n width: 116px;\n height: 102px;\n}\n\n.icon-2 {\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 0px;\n height: auto;\n transition: all 0.5s ease-in-out;\n z-index: -2;\n}\n\nbutton:hover {\n padding: 30px 20px;\n border-radius: 15px 15px 70px 70px;\n}\n\nbutton:hover .icon-1 {\n top: -60%;\n left: -20%;\n transform: translate(-50%, 0);\n width: 50px;\n height: auto;\n animation: inIcon1 1s ease 0.45s forwards;\n}\n\n@keyframes inIcon1 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 25% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(5deg);\n }\n\n 50% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(1deg);\n }\n\n 65% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(3deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n}\n\nbutton:hover .icon-2 {\n position: absolute;\n top: -60%;\n left: 60%;\n transform: translate(-50%, 0);\n width: 75px;\n height: auto;\n animation: inIcon2 1s ease 0.45s forwards;\n}\n\n@keyframes inIcon2 {\n 0% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(0deg);\n }\n\n 35% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(10deg);\n }\n\n 50% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(4deg);\n }\n\n 80% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(5deg);\n }\n\n 100% {\n transform-origin: 0 100%;\n transform: translate(-50%, 0) rotate(2deg);\n }\n}\n"}

wonderful-elephant-7

👁 实时预览

📝 源代码