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样式，可以创建一个具有现代感的手机模型外观，包含基本的手机特征和响应式设计。
