前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/YvOzNy
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cg46aSG
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 2 个元素,分别表示锅盖和锅体:
<div class="steamer">
<div class="lid"></div>
<div class="pot"></div>
</div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right bottom, violet, midnightblue);
}
定义容器尺寸:
.steamer {
width: 30em;
height: 30em;
background-color: snow;
font-size: 10px;
border-radius: 50%;
}
画出锅体:
.steamer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pot {
position: relative;
width: 16em;
height: 12em;
background: darkslateblue;
border-radius: 0.5em 0.5em 6.5em 6.5em;
border-right: 1.5em solid midnightblue;
}
画出锅把手:
.steamer {
z-index: 1;
}
.pot::before {
content: '';
position: absolute;
width: 27em;
height: 2.5em;
background-color: tomato;
left: -4.75em;
top: 2em;
z-index: -1;
}
画出锅盖:
.lid {
width: 17em;
height: 6em;
background-color: gold;
position: relative;
border-radius: 6em 6em 0 0;
border-right: 1.5em solid goldenrod;
画出锅盖上的钮扣把手:
.lid::before {
content: '';
position: absolute;
width: 4em;
height: 4em;
background-color: tomato;
border-radius: 50%;
left: 7em;
top: -2.5em;
}
接下来润色一下。
为锅体增加光影:
.pot::after {
content: '';
position: absolute;
width: 8em;
height: 8em;
border: 0.6em solid transparent;
border-radius: 50%;
border-left-color: white;
transform: rotate(-60deg);
top: 1em;
left: 2em;
}
为锅盖增加光影:
.lid::after {
content: '';
position: absolute;
width: 7em;
height: 7em;
border: 0.6em solid transparent;
border-radius: 50%;
border-left-color: white;
transform: rotate(40deg);
top: 0.6em;
left: 2.5em;
}
最后,增加动画效果:
.lid {
transform: translateY(-0.5em);
animation: animate 1s infinite alternate;
}
@keyframes animate {
to {
transform: translateY(0.5em);
}
}
大功告成!
前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅的更多相关文章
- 前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VBGWqX 可交互视频 此视频是可 ...
- 前端每日实战:124# 视频演示如何用纯 CSS 创作一只纸鹤
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xagoYb 可交互视频 此视频是可 ...
- 前端每日实战:103# 视频演示如何用纯 CSS 创作一只监视眼
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBzLdy 可交互视频 此视频是可 ...
- 前端每日实战:58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrRmWy 可交互视频 此视频是可 ...
- 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...
- 前端每日实战:132# 视频演示如何用纯 CSS 创作一只思考的手
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WgdVyx/ 可交互视频 此视频是 ...
- 前端每日实战:111# 视频演示如何用纯 CSS 创作一只艺术的鸭子
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/aaoveW 可交互视频 此视频是可 ...
- 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可 ...
- 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZRjGGy 可交互视频 此视频是可 ...
随机推荐
- 记录ionic 最小化应用时所遇的问题
ionic3与ionic4最小化插件安装不一样: ionic3安装方法: $ ionic cordova plugin add cordova-plugin-appminimize $ npm ins ...
- kubernetes flannel 网卡绑定错误,故障排查
kubernetes 新加了个node,状态Ready,但调度过去的任务,都执行异常 查看异常节点日志 `Error adding net work: open run/flannel/subnet. ...
- bind() 方法
一. 定义和用法 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 语法: $(selector).bind(event,data,function) 举例:
- Office Shared-Addin : Favorite的下载、安装和使用(2020.2.22)
Favorite是一个可以用于Office常用组件.VBA的共用加载项,32位和64位都兼容. 如果是Office 2007及其以上版本,界面显示为Custom UI+任务窗格. 如果是Office ...
- iOS性能检测工具instrunments简单介绍
1.前提条件 在appstore中下载安装xcode 2.打开方式 3.页面元素介绍 3.电脑连接手机选中要测试的app 4.选中要测试哪项,双击进去,点击开始进行监控测试 5.主要介绍一下三项 第一 ...
- 一:MYsql登录,服务开启和停止
字段的属性: 1:名称 2:数据类型 3:长度 4:约束 SQL的分类:(结构化查询语言) 1:数据查询语言DQL select 2:数据操纵语言DML insert delete u ...
- python-django-redis拒绝连接问题解决_20191121
今天安装fastdfs的时候,发现最好固定虚拟机的ip, 固定了ip之后,发现使用Windows中的pycharm连接redis的时候,总是拒绝连接,找了很多的办法都不行,有点慌, 但是不能慌,现在要 ...
- 瑞星:以虚拟化安全“Hold住”企业用户
自从云计算的概念诞生的哪一天起,就吸引了无数人的目光.自从2006年开始,云计算经过了雾里看花的朦胧.众说纷纭的迷茫,到现在各类应用与服务呈现出了百花齐放的姿态,引领着信息科技迈入了新纪元,而服务器虚 ...
- Invalid action class configuration that references an unknown class解决方案
Sturts2整合后时出现诡异的异常: java.lang.RuntimeException: Invalid action class configuration that references a ...
- 移动端Video标签踩坑记录
需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...