前言
五一出去玩，看到好多人带着自己心爱的拍立得相机嘎嘎出片，所以这次便通过一次假期体验来带大家实现这个拍立得相机，实现过程十分简单，效果百分之九十九复刻。话不多说，咱们直接进入主题。
效果预览
拍立得最终实现的相关效果如下。
HTML部分
首先看到HTML部分。相关代码如下。
<body>
<div class="camera">
<span class="lens"></span>
<span class="picture"></span>
</div>
</body>
我们首先要开实现的就是整个相机的框架部分，用一个 div 元素，用作相机的外壳或主体，为其赋予一个类名 camera，来设置样式（比如颜色、大小、形状等）。用一个 span 元素，表示相机的镜头，为其赋予类名 lens，设计镜头的外观（比如圆形、凸起效果等）。用另一个 span 元素，表示相机的取景器、屏幕或照片显示区域。
CSS部分
紧接着看到CSS部分。相关代码如下。
这里是类名为camera的CSS部分，相关代码如下。
.camera {
width: 20em;
height: 23em;
font-size: 10px;
background:
radial-gradient(
circle at 17em 7em,
#2c3e50 0.8em,
#7f8c8d 0.8em, #7f8c8d 1em,
transparent 1em
),
radial-gradient(
circle at 3.6em 7em,
#e74c3c 1em,
#95a5a6 1em, #95a5a6 1.2em,
transparent 1.2em
),
linear-gradient(
transparent 18em,
#34495e 18em, #34495e 19.5em,
transparent 19.5em
) no-repeat center / 80% 100%,
linear-gradient(
#ecf0f1 10em,
#bdc3c7 10em, #bdc3c7 14em,
#95a5a6 14em
);
border-radius: 2em;
position: relative;
top: -4em;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.camera::before {
content: '';
position: absolute;
width: 4.5em;
height: 2em;
background-color: #2c3e50;
border-radius: 0.5em;
top: 1.5em;
left: 1.5em;
}
.camera::after {
content: '';
position: absolute;
width: 3em;
height: 3em;
background:
radial-gradient(
#1abc9c 10%,
#2c3e50 30%,
transparent 40%
),
#2c3e50;
right: 1.5em;
top: 1.5em;
border-radius: 0.3em;
}
我们定义了一个相机的样式，使用了多个渐变、伪元素 (::before 和 ::after) 和阴影效果，构建出一个具有镜头、闪光灯和按钮的相机外观。
主镜头（右侧大圆）：深蓝色（#2c3e50）到灰色的渐变，边缘透明。辅助镜头（左侧小红点）：红色（#e74c3c）到灰色的渐变。底部横条：黑色装饰线，位于相机下方。主体渐变：从上到下由浅灰（#ecf0f1）渐变到深灰（#95a5a6）。
使用 camera::before 来模拟顶部按钮和装饰，使用 camera::after 来模拟相机右侧的闪光灯和功能按钮。最后通过阴影和渐变增强了立体感和真实感。
接着这里是类名为lens的CSS部分，相关代码如下。
.lens {
position: absolute;
width: 8em;
height: 8em;
background:
radial-gradient(
circle at 60% 45%,
#f1c40f 0.1em,
transparent 0.3em
),
radial-gradient(
circle at 50% 40%,
#f1c40f 0.3em,
transparent 0.5em
),
radial-gradient(
#3498db 2em,
#2980b9 2em, #2980b9 2.5em,
#2c3e50 2.5em, #2c3e50 4em
);
border-radius: 50%;
top: 3em;
left: 6em;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.lens::before,
.lens::after {
content: '';
position: absolute;
width: 5em;
height: 0.1em;
background-color: #2c3e50;
left: 1.5em;
animation: take-a-photo 3s infinite;
}
@keyframes take-a-photo {
10% {
height: calc(50% - 1em);
}
20% {
height: 0.1em;
}
}
.lens::before {
top: 1em;
}
.lens::after {
bottom: 1em;
}
这里定义了一个相机镜头（.lens） 的样式，并添加了动画效果，模拟拍照时的闪光效果。高光点1：右上角的小黄色光斑（#f1c40f），模拟镜头反光。高光点2：中心稍大的黄色光斑，增强立体感。 镜头底色：从浅蓝（#3498db）到深蓝（#2c3e50）的径向渐变，模拟玻璃镜头的透光效果。
通过 .lens::before 和 .lens::after 实现对焦辅助线，模拟相机对焦时的辅助线（两条水平线）。两条细线分别定位在镜头顶部和底部，共用动画 take-a-photo，实现拍照时的动态效果。
接下来就是这个动画效果了，在10% 关键帧对焦线高度变为 calc(50% - 1em)（从中心向上下扩展），在20% 关键帧恢复为原始细线（height: 0.1em），整体的效果就是模拟相机对焦时辅助线的动态变化（短暂展开后收回）。
最后就是picture的CSS部分，相关代码如下。
.picture::before {
content: '';
position: absolute;
box-sizing: border-box;
width: 15em;
height: 15em;
background: linear-gradient(
45deg,
#7f8c8d 50%,
#95a5a6 50%
);
left: 2.5em;
border: solid #ecf0f1;
border-width: 0 1em 2em 1em;
bottom: 0;
}
这里定义了一个相机屏幕或照片显示区域（.picture::before 伪元素） 的样式，模拟相机背面的显示屏或照片预览效果。整体效果就是一个 15em × 15em 的方形区域，带有斜向灰白渐变背景，下方有较厚的浅灰色边框，类似老式相机的显示屏或拍立得相纸的底部留白。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
