前端每日实战: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 可交互视频 此视频是可 ...
随机推荐
- 401认证钓鱼demo
<?php //@b4dboy if(!isset($_SERVER['PHP_AUTH_USER']) && !isset($_SERVER['PHP_AUTH_PW'])) ...
- html为什么用雪碧图的优缺点
CSS Sprite(雪碧图/精灵图) 1 概念解释 将小图标和背景图像合并到一张图片上,然后利用css的背景/定位来显示需要显示的图片部分. 2 优点 ① 减少 ...
- list集合、txt文件对比的工具类和文件读写工具类
工作上经常会遇到处理大数据的问题,下面两个工具类,是在处理大数据时编写的:推荐的是使用map的方式处理两个list数据,如果遇到list相当大数据这个方法就起到了作用,当时处理了两个十万级的list, ...
- python之os和sys模块的区别
一.os模块 os模块是Python标准库中提供的与操作系统交互的模块,提供了访问操作系统底层的接口,里面有很多操作系统的函数 1.os常用方法 import os # print(os.getcwd ...
- iOS商品详情、ffmpeg播放器、指示器集锦、自定义圆弧菜单、实用工具等源码
iOS精选源码 电商商品详情 Swift.两种方式实现tableViewCell拖拽功能 ffmpeg+openGL播放器 微信聊天表情雨.表情下落.表情动画 iOS指示器集锦 弹窗增加 picker ...
- [Windows] Windows API 串口通信
Windows 中通过Windows API 进行串口通信主要有以下步骤: 打开串口 配置串口 读写串口 关闭串口 打开串口 关键API: CreateFile Windows 中进行设备的操作,第一 ...
- python-django项目基础-haystack&whoosh&jieba_20191124
全文检索框架和搜索引擎的安装和配置: 安装全文检索框架,pip install django-haystack, 安装搜索引擎,pip install whoosh settings里面配置 1,注册 ...
- Android USB应用开发指南
调试 USB接口被占用后使用wifi调试模式 详见:https://blog.csdn.net/u013758456/article/details/78911812 开发
- elasticsearch用法
基本原理 搜索引擎的索引 倒排序 由value查找key 数据库的索引 由key查找value 用于解决分库分表后的排序分页 like查找 性能问题 日志库的全文搜索 spring集成时使用的不是re ...
- 吴裕雄--天生自然Android开发学习:1.2.1 使用Eclipse + ADT + SDK开发Android APP
1.前言 这里我们有两条路可以选,直接使用封装好的用于开发Android的ADT Bundle,或者自己进行配置 因为谷歌已经放弃了ADT的更新,官网上也取消的下载链接,这里提供谷歌放弃更新前最新版本 ...