前端每日实战:94# 视频演示如何用纯 CSS 创作一台拍立得照相机

news/2024/4/15 8:49:56

图片描述

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/YjYgey

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cpQpGtQ

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 2 个元素,分别代表镜头和照片:

<div class="camera"><span class="lens"></span><span class="picture"></span>
</div>

居中显示:

body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background: linear-gradient(to left bottom, linen, tan);
}

画出相机的轮廓:

.camera {width: 20em;height: 23em;font-size: 10px;background: linear-gradient(blanchedalmond, blanchedalmond 10em,wheat 10em, wheat 14em,tan 14em);border-radius: 2em;
}

画出镜头的轮廓:

.camera {position: relative;
}.lens {position: absolute;width: 8em;height: 8em;background: radial-gradient(cadetblue 2em,#555 2em, #555 2.5em,#333 2.5em, #333 4em);border-radius: 50%;top: 3em;left: 6em;
}

用线性渐变画出下方照片的出口:

.camera {background: linear-gradient(transparent 18em,#333 18em, #333 19.5em,transparent 19.5em) no-repeat center / 80% 100%,linear-gradient(blanchedalmond, blanchedalmond 10em,wheat 10em, wheat 14em,tan 14em);border-radius: 2em;position: relative;
}

接下来修饰细节。
用伪元素画出相机的取景器和闪光灯:

.camera::before {content: '';position: absolute;width: 4.5em;height: 2em;background-color: #333;border-radius: 0.5em;top: 1.5em;left: 1.5em;
}.camera::after {content: '';position: absolute;width: 3em;height: 3em;background-color: #333;background-image: radial-gradient(teal 10%,#333 30%,transparent 40%);right: 1.5em;top: 1.5em;border-radius: 0.3em;
}

用径向渐变画出相机上的按钮:

.camera {background: radial-gradient(circle at 17em 7em,black 0.8em,darkgray 0.8em, darkgray 1em,transparent 1em),radial-gradient(circle at 3.6em 7em,tomato 1em,darkgray 1em, darkgray 1.2em,transparent 1.2em),linear-gradient(transparent 18em,#333 18em, #333 19.5em,transparent 18em) no-repeat center / 80% 100%,linear-gradient(blanchedalmond, blanchedalmond 10em,wheat 10em, wheat 14em,tan 14em);
}

用径向渐变画出镜头上的光影:

.lens {background: radial-gradient(circle at 60% 45%,khaki 0.1em,transparent 0.3em),radial-gradient(circle at 50% 40%,khaki 0.3em,transparent 0.5em),radial-gradient(cadetblue 2em,#555 2em, #555 2.5em,#333 2.5em, #333 4em);
}

接下来制作动画效果。
用伪元素模拟快门:

.lens::before,
.lens::after {content: '';position: absolute;width: 5em;height: 0.1em;background-color: #333;
}.lens::before {top: 1em;
}.lens::after {bottom: 1em;
}

增加快门开合动画效果:

.lens::before,
.lens::after {animation: take-a-photo 3s infinite;
}@keyframes take-a-photo {10% {height: calc(50% - 1em);}20% {height: 0.1em;}
}

画出照片:

.picture {position: absolute;width: inherit;height: 13em;top: 18em;
}.picture::before {content: '';position: absolute;box-sizing: border-box;width: 15em;height: 15em;background: #555;left: 2.5em;border: solid linen;border-width: 0 1em 2em 1em;bottom: 0;
}

增加打印照片的动画效果:

.picture {height: 0em;overflow: hidden;animation: print 3s infinite;
}@keyframes print {30% {height: 0em;}80%, 100% {height: 13em;}
}

最后,把相机向上挪一点,保持垂直居中:

.camera {transform: translateY(-3em);
}

大功告成!


http://www.ppmy.cn/news/300445.html

相关文章

如何用纯 CSS 创作一台拍立得照相机

效果预览 按下右侧的“点击预览”按钮可以在当前页面预览&#xff0c;点击链接可以全屏预览。 https://codepen.io/comehope/pen/YjYgey 可交互视频 此视频是可以交互的&#xff0c;你可以随时暂停视频&#xff0c;编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 ht…

如何用纯 CSS 创作一台拍立得照相机

效果预览 按下右侧的“点击预览”按钮可以在当前页面预览&#xff0c;点击链接可以全屏预览。 https://codepen.io/comehope/pen/YjYgey 可交互视频 此视频是可以交互的&#xff0c;你可以随时暂停视频&#xff0c;编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 ht…

Pr 拍立得风格图片展示

哈喽&#xff0c;各位小伙伴&#xff01;今天我们来学习一下如何制作拍立得风格的照片展示效果&#xff1f; 新建三个序列 在开始之前&#xff0c;我们需要新建三个序列 序列1&#xff1a;总合成-尺寸1902*1080序列2&#xff1a;照片合成-尺寸1920*1080序列3&#xff1a;照片…

STM32实验-PWM DAC模拟输出

一般一个STM32只有2个DAC输出通道&#xff0c;如果需要多路DAC输出&#xff0c;可以选择外扩DAC&#xff0c;但成本回相当高。于是在一些精度要求不高的场合&#xff0c;我们采用定时器输出PWM和RC滤波器模拟DAC来代替外扩DAC。 PWM占空比可由以下式子计算出&#xff1a;p n …

【MySQL高级篇笔记-数据库其它调优策略(中) 】

此笔记为尚硅谷MySQL高级篇部分内容 目录 一、数据库调优的措施 1、调优的目标 2、如何定位调优问题 3、调优的维度和步骤 二、优化MySQL服务器 1、优化服务器硬件 2、优化MySQL的参数 三、优化数据库结构 1、拆分表&#xff1a;冷热数据分离 2、增加中间表 3、增加…

AI绘画:让你的想象在纸上自由绽放

AI绘画&#xff1a;让你的想象在纸上自由绽放 需要源码请在文章下评论或私信 引言 随着科技的不断发展&#xff0c;人工智能技术已经开始在各个领域大放异彩。其中&#xff0c;AI绘画成为了一个备受关注的话题。AI绘画是指利用人工智能算法生成艺术作品的新型艺术形式。与传统…

elementUI树形结构过滤后展示数据和多选框选择问题

elementUI树形结构过滤后展示数据和多选框选择问题 <template><div><div class"flex mt14"><InputSelect title"品牌" :options"taskObj" class"ml20" change"handleBrand" :val"treeBrand"…

lubcon turmogrease turmosynthgrease turmotemp

lubcon turmogrease turmosynthgrease turmotemp GORUBER 戈润勃 4SFLUID 4SFLUIDSPRAY BAC V101 BIOLUBEHK22 BREMSENREINIGERLOSE COMPCLEANSTS DL6 FG100 FG32 FG46 FG68 GPX100 GPX46 GPX68 HTO46 HTO68 MT32 MT46 MT68 PEB32 PEBCOOLANT VG46 VG68 VPO100 DIACUT DIACUT…

让Placeholder在IE中燥起来

网上有好多关于这方面解决兼容性问题的文章&#xff0c;很多招式&#xff0c;学会这一招&#xff0c;让你轻松搞定Placeholder的兼容性&#xff0c;叫我好人&#xff0c;拿走&#xff0c;不谢。。。。 placeholder属性是HTML5 中为input添加的。在input上提供一个占位符&#x…

JQuery UI 日历加时间

写一个面试时间通知。用jquery ui 具体功能已经可以了&#xff0c;不过样式还没调 一、需要引入的文件&#xff0c;这些可以到官网下载 <link rel"stylesheet" href"jquery-ui.css"> <script src"jquery-1.10.2.js"></script>…

VMware Workstation 16 安装教程

哈喽&#xff0c;大家好。今天一起学习的是VMware Workstation 16的安装&#xff0c;vm虚拟机是小编非常喜欢的生产力软件&#xff0c;小编之前发布的测试教程钧在vm上进行的实验。 VMware Workstation是一款功能强大的桌面虚拟计算机软件&#xff0c;它能够让用户在宿主机操作…

手机号验证码

<p > <label><em>*</em>手机号 </label> <span><input type"text" id"phone" name"phone" class"text" value"" maxlength"50" datatype"phone" placeholder&…

BASE.CSS一份css初始化代码

/*** 初始化HTML标签及常用类型* kivenhan* www.shopnc.net* Apr-01-2012**//* * 重新定义Html元素* */ html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input { padding: 0; margin: 0;} h1, h2, h3, h4, h5, h6, p…

ViperX 300 Robot Arm 机械臂 “5自由度和360°全方位旋转”

ViperX 300 Robot Arm简介 ViperX 300机械臂属于Interbotix一个新的手臂系列&#xff1b;特色是配有DYNAMIXEL X系列智能伺服电机&#xff0c;与以前的伺服器相比&#xff0c;X系列舵机以较小的外形尺寸提供了&#xff1a;更高的扭矩、更有效的散热、更好的耐用性&#xff0c;…

PK投票效果

/** *createTime:2015-07-21 *updateTime:2015-06-22 *author:刘俊 *Description&#xff1a;PK投票 *phone:13469119119 **//*投票*/ (function($){//投票插件$.fn.voter function(dom) {dom $.extend({voteTit: ".voteTitle",//投票观点voteBar: ".voteBar&…

css初始化代码

最近老有新项目开发&#xff0c;一直在找存留的CSS初始化代码&#xff0c;索性放到这里备份下&#xff0c; charset "utf-8"; /* -------------------------------------- *------------------------------------- *------------------------------------ *---------…

java恶魔城_恶魔城之月下夜想曲

快速搜索机型: 诺基亚 N70系列(176208) 7610 3230 6600 6260 6620 6630 6670 6680 6681 6682 N70 N72 ;松下: X700 X800 ;联想: P930 诺基亚 N73系列(240320) N73 5320 5320XM 5320di_XM 5630XM 5700 5700XM 5710XM 5730XM 6110 6110N 6120 6120C 6120ci 6121 6122C 6124C 6210…

使用Scrapy爬取美食网站

如今的爬虫技术主要还是人工定位信息位置&#xff0c; 本次爬取的对象是美食杰网站 使用的爬虫框架为scrpay 不得不说&#xff0c;scrapy的确十分好用&#xff0c; 尤其是scrapy shell&#xff0c;使用scrapy shell 写xpath对网页进行探索 非常的方便&#xff01; import…

001-电脑操作规范-2019年03月.doc

001-电脑操作规范-2019年03月.doc 本文作者&#xff1a;徐晓亮 BoAi 作者腾讯QQ号码&#xff1a;595076941 // 001、在电脑桌面上新建批处理文件 文件名改成“dn电脑操作规范-2019年03月.bat” 并添加如下一行脚本语句&#xff1a; start /max D:\Prog\SogouExplorer\SogouExpl…

【Laravel 6】安装需要什么环境?又怎么安装呢

服务器要求 服务器满足以下要求&#xff1a; PHP > 7.2.5BCMath PHP 拓展Ctype PHP 拓展JSON PHP 拓展Mbstring PHP 拓展OpenSSL PHP 拓展PDO PHP 拓展Tokenizer PHP 拓展XML PHP 拓展 安装Laravel Laravel 使用 Composer 来管理项目依赖。因此&#xff0c;在使用 Larav…
最新文章