前端每日实战:66# 视频演示如何用纯 CSS 创作一台咖啡机
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/rKPLMW
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/c6NzPfK
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含机体、出水口、咖啡杯、按钮和咖啡:
<div class="coffee-machine"><span class="body"></span><span class="spout"></span><span class="cup"></span><span class="button"></span><span class="coffee"></span>
</div>
居中显示:
body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background: linear-gradient(to right bottom, sandybrown, darkred);
}
定义容器尺寸:
.coffee-machine {width: 15em;height: 15em;background-color: white;font-size: 20px;border-radius: 50%;border: 2em solid white;
}
画出机体的外框:
.coffee-machine {position: relative;display: flex;justify-content: center;
}.body {position: absolute;width: 8em;height: 12em;background-color: sandybrown;border-radius: 1.2em;top: 1.5em;border-right: 0.6em solid peru;
}
用伪元素画出机体的中间部分:
.body::after {content: '';position: absolute;width: 8em;height: 8em;background-color: darkslategray;top: 2em;border-right: 0.6em solid black;
}
画出出水口:
.spout {position: absolute;width: 3em;height: 1em;background-color: white;top: 3.5em;border-radius: 0.5em;border-right: 0.5em solid silver;
}
画出咖啡杯的杯体:
.cup {position: absolute;width: 3em;height: 2em;background-color: white;bottom: 3.5em;border-radius: 0 0 1.4em 1.4em;border-right: 0.5em solid silver;
}
用伪元素画出咖啡杯的把手:
.cup::after {content: '';position: absolute;width: 0.6em;height: 0.6em;border: 0.3em solid silver;border-radius: 50%;right: -1.2em;top: 0.2em;
}
画出按钮:
.button {position: absolute;width: 1.2em;height: 1.2em;background-color: tomato;border-radius: 50%;bottom: 2em;right: 4.5em;
}
画出咖啡:
.coffee::before,
.coffee::after {content: '';position: absolute;width: 0.7em;height: 5em;background-color: chocolate;top: 4.5em;left: calc((15em - 0.7em) / 2);
}
接下来润色一下。
为咖啡机增加光影:
.coffee-machine {z-index: 1;
}.coffee-machine::before,
.coffee-machine::after {content: '';position: absolute;width: 2em;height: 2em;border: 0.3em solid transparent;z-index: 2;border-radius: 50%;border-left-color: white;left: 3.8em;
}.coffee-machine::before {top: 1.8em;transform: rotate(40deg);
}.coffee-machine::after {bottom: 1.8em;transform: rotate(-40deg);
}
定义咖啡流动的前半段动画,即咖啡从出水口流到杯中:
.coffee::before {animation: 2s linear infinite;animation-name: pouring-before;transform-origin: top;
}@keyframes pouring-before {0%, 20% {transform: scaleY(0);}30%, 100% {transform: scaleY(1);}70%, 100% {visibility: hidden;}
}
定义咖啡流动的后半段动画,即出水口停止流出咖啡,剩余咖啡流到杯中:
.coffee::after {animation: 2s linear infinite;animation-name: pouring-after;transform-origin: bottom;
}@keyframes pouring-after {0%, 70% {visibility: hidden;transform: scaleY(1);}80%, 100% {transform: scaleY(0);}
}
大功告成!
前端每日实战:66# 视频演示如何用纯 CSS 创作一台咖啡机相关推荐
- 前端每日实战:94# 视频演示如何用纯 CSS 创作一台拍立得照相机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YjYgey 可交互视频 此视频是可 ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...
- 前端每日实战:100# 视频演示如何用纯 CSS 创作闪闪发光的霓虹灯文字
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBwvxw 可交互视频 此视频是可 ...
- 前端每日实战:60# 视频演示如何用纯 CSS 创作一块乐高积木
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKKqrv 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频 ...
- 前端每日实战:151# 视频演示如何用纯 CSS 创作超能陆战队的大白
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...
- 前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvOzNy 可交互视频 此视频是可 ...
- 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...
最新文章
- 微信小程序换行,空格的写法
- 十个效果酷炫的Linux系统操作指令(像黑客帝国般的效果~)
- MPTCP 源码分析(五) 接收端窗口值
- 面向对象编程(OPP)
- php imagemagick 漏洞,ImageMagick漏洞EXP简易生成脚本
- shell脚本中echo显示内容带颜色的实现方法
- iOS Icon Size 快速得到三种大小的图标
- 完美解答35K月薪的MySQL面试题(一)MySQL是如何存储数据的
- LVS DR模式搭建,keepalived + LVS
- 分布式为什么使用Redis
- 大数据可视化平台有什么特点
- glob-parent Regular expression denial ofservice
- OceanBase社区版4.0,给了我很多惊喜
- git reflog 恢复已删除分支
- autoit3模拟鼠标点击之MouseClick
- 微信小程序之订阅消息推送
- c语言sqlite3写数据类型,在sqlite数据库中,int类型不等于integer数据类型
- u盘安装计算机系统,最新U盘装系统教程,像安装软件一样简单,3分钟学会!
- 爬虫学习日记1-豆瓣top250电影信息爬取
- 人才招聘微信小程序开发制作功能介绍
热门文章
- 尺度不变特征转换(Scale-invariant feature transform 或 SIFT)
- GPRS模块发送短信
- 1000句最常用英语口语 (五)
- 交通灯系统设计 educoder实训项目 logisim实现
- A-priori算法
- CATIA常用的26个小技巧
- 微软云存储SkyDrive API:将你的数据连接到任何应用、任何平台,及任何设备上
- 联想Y7000P win11笔记本双硬盘安装Ubuntu20双系统和显卡驱动
- C#VS2019中ReportViewer控件和报表设计器 RDLC使用方法总结
- USRP X310使用的准备工作--Linux进行FPGA image烧录