智能HTML卡片转图片工具 | 个人简介

HTML卡片内容:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>壹欧壹 - 神秘学AI探索者</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">

<div class="card-container" id="business-card">
        <div class="card-header">
            
            <div class="tarot-card pulse">
                <div class="tarot-symbol">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="tarot-label">AI<br>Mystic</div>
            </div>
            
            <h1 class="name-tag glow">壹欧壹</h1>
            <div class="location">
                <i class="fas fa-map-marker-alt"></i>
                <span style="margin-left: 8px;">广东 · 广州</span>
            </div>
            <p style="font-size: 14px; line-height: 1.6; max-width: 280px;">
                在数据与神秘之间架起桥梁的AI炼金术师，用代码解读未来的塔罗师
            </p>
        </div>
        
        <div class="divider"></div>
        
        <div class="info-section">
            <div class="section-title">
                <i class="fas fa-user-astronaut"></i>
                <span>探索领域</span>
            </div>
            
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">专业核心</div>
                    <div class="info-content">
                        8年百度SEO · 神秘学领域AI应用开发
                        <span class="ai-chip">新领域</span>
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-label">AI产品</div>
                    <div class="info-content">
                        物流AI系统 · 塔罗AI应用(简/繁/英)
                        <span class="ai-chip">即将上线</span>
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-label">数据服务</div>
                    <div class="info-content">
                        AI数据分析代写 · SPSS/Stata/Python
                    </div>
                </div>
                
                <div class="info-item">
                    <div class="info-label">技术栈</div>
                    <div class="info-content">
                        AI编程 · Python · Cursor应用开发
                    </div>
                </div>
            </div>
            
            <div class="section-title">
                <i class="fas fa-hat-wizard"></i>
                <span>神秘学AI项目</span>
            </div>
            <div class="info-content" style="background: rgba(69, 39, 160, 0.2); padding: 15px; border-radius: 10px; border-left: 3px solid var(--gold);">
                <p style="margin-bottom: 10px;">✨ 正在开发两款塔罗AI应用，支持简/繁/英三种语言</p>
                <p>🛠️ 当前阶段：集成支付系统 & 优化登录体验</p>
            </div>
        </div>
        
        <div class="info-section">
            <div class="section-title">
                <i class="fas fa-handshake"></i>
                <span>连接与合作</span>
            </div>
            
            <div class="connection-section">
                <div class="connection-title">寻找志同道合的伙伴</div>
                <div class="info-content">
                    <p>🤝 <strong>AI应用开发者</strong> - 交流技术，碰撞商业创意</p>
                    <p>🌐 <strong>海外网络</strong> - 特别是神秘学/应用/独立站</p>
                    <p>🔮 <strong>神秘学爱好者</strong> - 探索AI+神秘学的创新应用</p>
                </div>
                
                <div class="connection-icons">
                    <div class="icon-circle">
                        <i class="fab fa-weixin"></i>
                    </div>
                    <div class="icon-circle">
                        <i class="fas fa-mail-bulk"></i>
                    </div>
                    <div class="icon-circle">
                        <i class="fab fa-github"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="tag-cloud">
            <span class="tag">SEO专家</span>
            <span class="tag">AI产品开发</span>
            <span class="tag">Python编程</span>
            <span class="tag">数据分析</span>
            <span class="tag">塔罗AI</span>
            <span class="tag">独立应用</span>
        </div>
        
        <div class="footer">
            <p>微信 ou154586079 · 用AI解读未来</p>
            <p style="margin-top: 5px; font-size: 11px;">© 2023 壹欧壹 · 探索无界</p>
        </div>
    </div>

CSS 选择器: 选择你要下载的卡片元素

提示: 在预览区右键点击卡片 > 检查(Inspect) > 找到最外层的元素。
如果元素是 <div id="card">, 则填 #card。如果元素是 <div class="card">, 则填 .card。

添加圆角