css制作工牌

使用CSS制作工牌的方法

HTML结构设计
创建一个简单的HTML结构，包含工牌的基本元素如姓名、职位、公司logo等：

<div class="id-card">
  <div class="company-logo"></div>
  <div class="employee-photo"></div>
  <h2 class="employee-name">张三</h2>
  <p class="employee-title">前端工程师</p>
  <div class="barcode"></div>
</div>

基础样式设计
设置工牌的尺寸、背景色和边框效果：

.id-card {
  width: 300px;
  height: 180px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

细节元素样式
添加公司logo、员工照片和文字样式：

.company-logo {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 60px;
  height: 30px;
  background-color: #fff;
  border-radius: 4px;
}

.employee-photo {
  position: absolute;
  top: 50px;
  left: 20px;
  width: 80px;
  height: 100px;
  background-color: #ddd;
  border: 2px solid #fff;
}

.employee-name {
  position: absolute;
  top: 50px;
  left: 120px;
  margin: 0;
  color: #333;
}

.employee-title {
  position: absolute;
  top: 80px;
  left: 120px;
  margin: 0;
  color: #666;
  font-size: 14px;
}

.barcode {
  position: absolute;
  bottom: 10px;
  left: 20px;
  width: 260px;
  height: 30px;
  background-color: #000;
}

高级效果增强
添加悬停动画和3D效果：

.id-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.id-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: rgba(255,255,255,0.2);
}

响应式调整
为不同设备尺寸调整工牌大小：

@media (max-width: 480px) {
  .id-card {
    width: 250px;
    height: 150px;
  }

  .employee-photo {
    width: 60px;
    height: 80px;
  }
}

实际应用建议

• 使用CSS变量便于主题颜色统一管理
• 考虑添加印刷媒体查询确保打印效果
• 可以使用伪元素创建更复杂的装饰效果
• 对于真实项目建议将员工数据动态化处理

以上代码提供了完整的工牌视觉效果，可以根据实际需求调整尺寸、颜色和布局。