{"html":"

\n \n\n

\n \n \n \n

\n","css":".loader {\n width: 150px;\n height: 214px;\n padding: 15px;\n background: #f5f5f5;\n border: 1px solid #eee;\n border-radius: 12px;\n position: relative;\n overflow: hidden;\n}\n\n.header {\n display: flex;\n margin-top: 5px;\n margin-bottom: 20px;\n}\n\n.avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: #e0e0e0;\n margin-right: 15px;\n}\n\n.info {\n flex: 1;\n padding-top: 5px;\n}\n\n.nickname {\n width: 40px;\n height: 16px;\n background: #e0e0e0;\n border-radius: 4px;\n margin-bottom: 8px;\n}\n.signature {\n width: 55px;\n height: 12px;\n background: #e0e0e0;\n border-radius: 4px;\n}\n\n.qr-code {\n width: 110px;\n height: 110px;\n background: #e0e0e0;\n border-radius: 8px;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n}\n.qr-icon {\n width: 80px;\n height: 80px;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n opacity: 0.08;\n}\n\n.loader::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 50%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 0%,\n rgba(255, 255, 255, 0.3) 50%,\n rgba(255, 255, 255, 0) 100%\n );\n animation: shine 1.2s infinite;\n}\n\n@keyframes shine {\n 100% {\n left: 200%;\n }\n}\n"}

bitter-frog-95

👁 实时预览

📝 源代码