当前位置：首页 > CSS

css制作手机模型

2026-03-12 04:04:51CSS

使用CSS制作手机模型

通过CSS的边框、阴影和伪元素可以创建一个简单的手机模型。以下是实现方法：

HTML结构

css制作手机模型

<div class="phone">
  <div class="screen"></div>
  <div class="home-button"></div>
</div>

CSS样式

.phone {
  width: 300px;
  height: 600px;
  background: #111;
  border-radius: 40px;
  position: relative;
  box-shadow: 0 0 0 8px #333, 0 0 30px rgba(0,0,0,0.5);
}

.screen {
  width: 280px;
  height: 500px;
  background: #fff;
  border-radius: 20px;
  position: absolute;
  top: 50px;
  left: 10px;
}

.home-button {
  width: 60px;
  height: 60px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  bottom: 20px;
  left: 120px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.phone::before {
  content: '';
  width: 80px;
  height: 10px;
  background: #333;
  border-radius: 5px;
  position: absolute;
  top: 20px;
  left: 110px;
}

添加细节增强效果

为手机模型添加摄像头和音量按钮等细节：

css制作手机模型

.phone::after {
  content: '';
  width: 20px;
  height: 60px;
  background: #333;
  position: absolute;
  top: 120px;
  left: -5px;
  border-radius: 5px 0 0 5px;
}

.screen::before {
  content: '';
  width: 15px;
  height: 15px;
  background: #222;
  border-radius: 50%;
  position: absolute;
  top: 15px;
  left: 15px;
}

.screen::after {
  content: '';
  width: 40px;
  height: 5px;
  background: #222;
  position: absolute;
  top: 22px;
  left: 40px;
  border-radius: 5px;
}

响应式调整

通过媒体查询使手机模型适应不同屏幕尺寸：

@media (max-width: 600px) {
  .phone {
    width: 200px;
    height: 400px;
    border-radius: 25px;
  }

  .screen {
    width: 180px;
    height: 300px;
    top: 40px;
    border-radius: 15px;
  }

  .home-button {
    width: 40px;
    height: 40px;
    bottom: 15px;
    left: 80px;
  }
}

添加交互效果

使用CSS动画让手机模型更加生动：

.screen {
  transition: all 0.3s ease;
}

.phone:hover .screen {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
}

.home-button:active {
  transform: scale(0.9);
  background: #555;
}

这些CSS技巧可以创建出具有基本外观和交互效果的手机模型，通过调整尺寸、颜色和细节可以模拟不同品牌的手机外观。