css制作手机模型

使用CSS制作手机模型

基础结构

HTML部分创建一个手机容器和屏幕区域：

<div class="phone">
  <div class="screen"></div>
</div>

手机容器样式

设置手机外观的圆角、阴影和边框效果：

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

屏幕区域样式

添加屏幕内边距和内容区域：

.screen {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: white;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 20px;
  overflow: hidden;
}

添加细节元素

创建摄像头和Home键：

.phone::before {
  content: '';
  width: 60px;
  height: 10px;
  background: #333;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
}

.phone::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 2px solid #444;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

响应式调整

添加媒体查询适应不同尺寸：

@media (max-width: 400px) {
  .phone {
    width: 250px;
    height: 500px;
  }
}

动态效果（可选）

添加悬停动画效果：

.phone:hover {
  transform: rotate(5deg);
  transition: transform 0.3s ease;
}

通过组合这些CSS样式，可以创建一个具有现代感的手机模型外观，包含基本的手机特征和响应式设计。