{"html":"\n","css":".button {\n cursor: pointer;\n border: none;\n background: #7808d0;\n color: #fff;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n overflow: hidden;\n position: relative;\n display: grid;\n place-content: center;\n transition:\n background 300ms,\n transform 200ms;\n font-weight: 600;\n}\n\n.button__text {\n position: absolute;\n inset: 0;\n animation: text-rotation 8s linear infinite;\n\n > span {\n position: absolute;\n transform: rotate(calc(19deg * var(--index)));\n inset: 7px;\n }\n}\n\n.button__circle {\n position: relative;\n width: 40px;\n height: 40px;\n overflow: hidden;\n background: #fff;\n color: #7808d0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button__icon--copy {\n position: absolute;\n transform: translate(-150%, 150%);\n}\n\n.button:hover {\n background: #000;\n transform: scale(1.05);\n}\n\n.button:hover .button__icon {\n color: #000;\n}\n\n.button:hover .button__icon:first-child {\n transition: transform 0.3s ease-in-out;\n transform: translate(150%, -150%);\n}\n\n.button:hover .button__icon--copy {\n transition: transform 0.3s ease-in-out 0.1s;\n transform: translate(0);\n}\n\n@keyframes text-rotation {\n to {\n rotate: 360deg;\n }\n}\n"}

fresh-goose-83

👁 实时预览

📝 源代码

🔗 相关联的样式