摘要:效果预览按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/pen/xjXxoz
可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/c/cBm4eU9
源代码下载请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/013-hot-coffee-cup
代码解读定义 dom,一个名为 coffee 的容器,其中包含一个名为 cup 的元素:
居中显示:
html, body { height: 100%; align-items: center; justify-content: center; background-color: brown; }
画出杯子主体:
.coffee .cup { width: 10em; height: 9em; background-color: white; border-bottom-left-radius: 1.5em; border-bottom-right-radius: 1.5em; }
用伪元素画出杯口:
.coffee .cup { position: relative; } .coffee .cup::before { content: ""; position: absolute; width: 100%; height: 2em; background-color: chocolate; border: 0.5em solid white; box-sizing: border-box; border-radius: 50%; top: -1em; box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.5); }
用伪元素画出杯子把手:
.coffee .cup::after { content: ""; position: absolute; width: 3em; height: 3.5em; border: 0.8em solid white; border-radius: 50%; top: 20%; left: 80%; }
dom 元素增加托盘:
画出托盘:
.coffee { display: flex; flex-direction: column; align-items: center; height: calc(9em + 1em); position: relative; } .coffee .plate { width: 16em; height: 1em; background-color: white; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; position: absolute; bottom: -1px; }
dom 元素增加杯中冒出的热气:
画出杯中冒出的热气:
.coffee { height: calc(9em + 1em + 2em); } .coffee .vapor { width: 7em; display: flex; justify-content: space-between; } .coffee .vapor span { width: 0.1em; min-width: 1px; height: 2em; background-color: white; }
定义热气冒出的动画:
.coffee .vapor span { animation: evaporation 2s linear infinite; filter: opacity(0); } @keyframes evaporation { from { transform: translateY(0); filter: opacity(1) blur(0.2em); } to { transform: translateY(-4em); filter: opacity(0) blur(0.4em); } }
最后,调整每条热气的延迟时间,使动感更强:
.coffee .vapor span:nth-child(1) { animation-delay: 0.5s; } .coffee .vapor span:nth-child(2) { animation-delay: 0.1s; } .coffee .vapor span:nth-child(3) { animation-delay: 0.3s; } .coffee .vapor span:nth-child(4) { animation-delay: 0.4s; } .coffee .vapor span:nth-child(5) { animation-delay: 0.2s; }
大功告成!
知识点border-bottom-left-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius
border-bottom-right-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius
box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
translateY() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY
filter https://developer.mozilla.org/en-US/docs/Web/CSS/filter
animation-delay https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52310.html
摘要:效果预览按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbyu4?w=500&h=500); 效果预览 按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。 https://codepen.io/zhang-ou/pen/...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
阅读 2096·2021-09-27 14:04
阅读 1846·2019-08-30 15:55
阅读 1669·2019-08-30 13:13
阅读 1037·2019-08-30 13:07
阅读 2719·2019-08-29 15:20
阅读 3166·2019-08-29 12:42
阅读 3258·2019-08-28 17:58
阅读 3561·2019-08-28 17:56