<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java架构师高级名片</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a2a3a, #0d1b2a);
padding: 20px;
}
.business-card {
width: 350px;
height: 200px;
background: linear-gradient(145deg, #15202b, #0f172a);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
padding: 25px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
color: #e2e8f0;
border: 1px solid rgba(56, 178, 172, 0.2);
}
.business-card:hover {
transform: translateY(-5px);
}
.card-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.05;
background-image:
radial-gradient(circle at 20% 30%, rgba(56, 178, 172, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(66, 153, 225, 0.3) 0%, transparent 50%);
}
.java-code {
position: absolute;
bottom: 50px;
right: 15px;
font-size: 10px;
color: rgba(226, 232, 240, 0.1);
font-family: 'Courier New', monospace;
text-align: left;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.name-title {
flex: 1;
}
.name {
font-size: 22px;
font-weight: 600;
margin-bottom: 5px;
background: linear-gradient(90deg, #38b2ac, #4299e1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.5px;
}
.title {
font-size: 14px;
color: #90cdf4;
font-weight: 500;
letter-spacing: 1px;
}
.logo {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #38b2ac, #4299e1);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 24px;
color: white;
box-shadow: 0 4px 10px rgba(56, 178, 172, 0.3);
}
.contact-info {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.contact-item {
display: flex;
align-items: center;
font-size: 12px;
}
.contact-item i {
margin-right: 8px;
color: #38b2ac;
width: 16px;
text-align: center;
}
.expertise {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.skill-tag {
background: rgba(56, 178, 172, 0.15);
color: #90cdf4;
padding: 4px 10px;
border-radius: 20px;
font-size: 10px;
border: 1px solid rgba(56, 178, 172, 0.3);
}
.decoration {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle, rgba(56, 178, 172, 0.2) 0%, transparent 70%);
top: -30px;
right: -30px;
}
.architecture-icon {
position: absolute;
bottom: 25px;
left: 25px;
width: 40px;
height: 40px;
opacity: 0.7;
}
.architecture-icon::before,
.architecture-icon::after {
content: '';
position: absolute;
background: rgba(66, 153, 225, 0.5);
}
.architecture-icon::before {
width: 20px;
height: 4px;
top: 10px;
left: 0;
}
.architecture-icon::after {
width: 4px;
height: 20px;
top: 0;
left: 8px;
}
</style>
</head>
<body>
<div class="business-card">
<div class="card-background"></div>
<div class="decoration"></div>
<div class="card-header">
<div class="name-title">
<div class="name">马瑞富</div>
<div class="title">JAVA架构师</div>
</div>
<div class="logo">马</div>
</div>
<div class="contact-info">
<div class="contact-item">
<i>📱</i> +86 15555555555
</div>
<div class="contact-item">
<i>📧</i> email@maruifu.cn
</div>
</div>
<div class="expertise">
<div class="skill-tag">微服务架构</div>
<div class="skill-tag">云原生</div>
<div class="skill-tag">系统设计</div>
</div>
<div class="java-code">
public class Java {<br>
<br>
public static void main(String[] args) {<br>
<br>
System.out.println("Hello, World!");
<br>
}<br>
<br>
}<br>
</div>
</div>
</body>
</html>
本文由 小马哥 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:
2025/10/31 02:55
