效果预览

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

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 创作一只蒸锅的更多相关文章

  1. 前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VBGWqX 可交互视频 此视频是可 ...

  2. 前端每日实战:124# 视频演示如何用纯 CSS 创作一只纸鹤

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xagoYb 可交互视频 此视频是可 ...

  3. 前端每日实战:103# 视频演示如何用纯 CSS 创作一只监视眼

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBzLdy 可交互视频 此视频是可 ...

  4. 前端每日实战:58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrRmWy 可交互视频 此视频是可 ...

  5. 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...

  6. 前端每日实战:132# 视频演示如何用纯 CSS 创作一只思考的手

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WgdVyx/ 可交互视频 此视频是 ...

  7. 前端每日实战:111# 视频演示如何用纯 CSS 创作一只艺术的鸭子

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/aaoveW 可交互视频 此视频是可 ...

  8. 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可 ...

  9. 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZRjGGy 可交互视频 此视频是可 ...

随机推荐

  1. 记录ionic 最小化应用时所遇的问题

    ionic3与ionic4最小化插件安装不一样: ionic3安装方法: $ ionic cordova plugin add cordova-plugin-appminimize $ npm ins ...

  2. kubernetes flannel 网卡绑定错误,故障排查

    kubernetes 新加了个node,状态Ready,但调度过去的任务,都执行异常 查看异常节点日志 `Error adding net work: open run/flannel/subnet. ...

  3. bind() 方法

    一. 定义和用法 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 语法: $(selector).bind(event,data,function) 举例:  

  4. Office Shared-Addin : Favorite的下载、安装和使用(2020.2.22)

    Favorite是一个可以用于Office常用组件.VBA的共用加载项,32位和64位都兼容. 如果是Office 2007及其以上版本,界面显示为Custom UI+任务窗格. 如果是Office ...

  5. iOS性能检测工具instrunments简单介绍

    1.前提条件 在appstore中下载安装xcode 2.打开方式 3.页面元素介绍 3.电脑连接手机选中要测试的app 4.选中要测试哪项,双击进去,点击开始进行监控测试 5.主要介绍一下三项 第一 ...

  6. 一:MYsql登录,服务开启和停止

    字段的属性: 1:名称 2:数据类型 3:长度 4:约束 SQL的分类:(结构化查询语言) 1:数据查询语言DQL    select 2:数据操纵语言DML    insert  delete  u ...

  7. python-django-redis拒绝连接问题解决_20191121

    今天安装fastdfs的时候,发现最好固定虚拟机的ip, 固定了ip之后,发现使用Windows中的pycharm连接redis的时候,总是拒绝连接,找了很多的办法都不行,有点慌, 但是不能慌,现在要 ...

  8. 瑞星:以虚拟化安全“Hold住”企业用户

    自从云计算的概念诞生的哪一天起,就吸引了无数人的目光.自从2006年开始,云计算经过了雾里看花的朦胧.众说纷纭的迷茫,到现在各类应用与服务呈现出了百花齐放的姿态,引领着信息科技迈入了新纪元,而服务器虚 ...

  9. Invalid action class configuration that references an unknown class解决方案

    Sturts2整合后时出现诡异的异常: java.lang.RuntimeException: Invalid action class configuration that references a ...

  10. 移动端Video标签踩坑记录

    需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...