前端每日实战: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 创作一只蒸锅相关推荐
- 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...
- 前端每日实战: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 可交互视频 此视频是可 ...
- 前端每日实战:123# 视频演示如何用纯 CSS 创作一架双冀飞机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxVYRL 可交互视频 此视频是可 ...
最新文章
- 使用Keras构建具有自定义结构和层次图卷积神经网络(GCNN)
- PMP每日三题(2022年2月14日)
- 操作系统实验报告9:进程间通信—管道和 socket 通信
- SAP SMP的一些截图
- 递归神经网络变形之 (Long Short Term Memory,LSTM)
- eclipse实现Android登录功能,eclipse开发安卓登录
- html5 css3左侧多级菜单,modernizr.custom.js制作html5 CSS3多级层叠侧边菜单导航栏
- PIE SDK栅格生成等值线、面
- JBoss中间件漏洞总结
- Python基础 4 字符串的变形 判断
- 万娟 白话大数据和机械学习_白话大数据与机器学习 (高扬著) 带书签目录 完整pdf扫描版[71MB]...
- 高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具
- 微信二次分享解决方案
- 之江实验室牵手国科大杭高院 重磅启动全方位合作
- 远程连接云服务器中的mysql数据库_云服务器远程连接mysql数据库
- 关于使用Pytorch时,训练集模型表现很好但测试集模型表现极差的原因
- 盘点!网络安全厂商都有哪些?
- 产品经理如何提升自己的知识
- 苹果开机是白苹果黑屏_这是苹果应如何回应史诗般的1984年诱饵
- 空间相关性----地理探测器--学习记录
热门文章
- 解决数据库导入导出的常见问题集解决办法
- python自带的用于解析HTML的库HtmlParser
- Shell脚本字体颜色
- Servlet实现图片读取显示
- [九度][何海涛] 变态跳台阶
- VC编译选项 /EHa 异常处理
- LoadRunner常见错误代码解决方案
- 在安装project2010 64位时提示 “无法安装64位office,因为已有32位版本”解决方法
- Chart控件X轴显示不全的解决方法
- 双系统(win8.1+ubuntu14.04)删除win下分区导致grub rescue解决方案