前端日常实践：94#视频演示如何用纯CSS制作拍立得相机
时间：2023-04-05 02:12:35
HTML5
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/YjYgeyInteractivevideo这个视频是交互式的，你可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cpQpGtQ源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含2个元素，分别代表镜头和照片：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(toleftbottom,linen,tan);}绘制相机的轮廓：.camera{width:20em;高度：23em；字体大小：10px；背景：线性渐变（漂白杏仁，漂白杏仁10em，小麦10em，小麦14em，棕褐色14em）；border-radius:2em;}绘制相机轮廓：.camera{position:relative;}.lens{position:absolute;宽度：8em；高度：8em；背景：径向渐变（cadetblue2em，#5552em，#5552.5em，#3332.5em，#3334em）；边界半径小号：50%；顶部：3em；left:6em;}用线性渐变绘制下图的出口：.camera{background:linear-gradient(transparent18em,#33318em,#33319.5em,transparent19.5em)no-repeatcenter/80%100%,linear-gradient(blanchedalmond,blanchedalmond10em,wheat10em,wheat14em,tan14em);边界半径：2em；position:relative;}接下来修改细节使用伪元素绘制相机的取景器和闪光灯：.camera::before{content:'';位置：绝对；宽度：4.5em；高度：2em；背景色：#333；边界半径：0.5em；顶部：1.5em；left:1.5em;}.camera::after{content:'';位置：绝对；宽度：3em；高度：3em；背景色：#333；背景图像：径向渐变（蓝绿色10%，#33330%，透明40%）；右：1.5em；顶部：1.5em；border-radius:0.3em;}用径向渐变在相机上绘制按钮：.camera{background:radial-gradient(circleat17em7em,black0.8em,darkgray0.8em,darkgray1em,transparent1em),radial-渐变（圆形3.6em7em，番茄1em，深灰色1em，深灰色1.2em，透明1.2em），线性渐变（透明18em，#33318em，#33319.5em，透明18em）无重复中心/80%100%,linear-gradient(blanchedalmond,blanchedalmond10em,wheat10em,wheat14em,tan14em);}用径向渐变在镜头上绘制光影:.lens{background:radial-gradient(circleat60%45%，卡其色0.1em，透明0.3em），径向渐变（圆形50%40%，卡其色0.3em，透明0.5em），径向渐变（cadetblue2em，#5552em，#5552.5em，#3332.5em,#3334em);}接下来制作动画效果用伪元素模拟快门：.lens::before,.lens::after{content:'';位置：绝对；宽度：5em；高度：0.1em；background-color:#333;}.lens::before{top:1em;}.lens::after{bottom:1em;}增加快门开闭动画效果：.lens::before,.lens::after{animation:take-a-photo3sinfinite;}@keyframestake-a-photo{10%{height:calc(50%-1em);}20%{高度：0.1em；}}绘制照片：.picture{position:absolute;宽度：继承；高度：13em；top:18em;}.picture::before{内容:'';位置：绝对；框大小：边框框；宽度：15em；高度：15em；背景：#555；左：2.5em；宽度：01em2em1em；bottom:0;}增加打印照片的动画效果：.picture{height:0em;溢出：隐藏；动画：无限打印3秒；}@keyframes打印{30%{高度：0em；}80%,100%{高度:13em;}}最后，将相机向上移动一点以使其垂直居中：.camera{transform:translateY(-3em);}就大功告成了！
