摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/PaZYBw
可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cEQqefK
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义dom, 容器中包含笔头、笔杆(包含文字)和橡皮 3 部分:
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: lightskyblue; }
定义铅笔的尺寸:
.pencil { position: relative; width: 50em; height: 3.5em; }
画出笔杆:
.pencil .barrel { position: absolute; width: 40em; left: 4em; background-color: green; border-top: 1em solid forestgreen; border-bottom: 1em solid darkgreen; }
设置笔杆上文字的样式:
.pencil .barrel { line-height: 1.5em; font-family: sans-serif; text-transform: uppercase; color: silver; text-align: center; }
用伪元素画出笔头:
.pencil .taper::before, .pencil .taper::after { content: ""; position: absolute; left: -4em; border-style: solid; border-width: calc(3.5em / 2) 4em; } .pencil .taper::before { border-color: transparent burlywood transparent transparent; } .pencil .taper::after { border-color: transparent green transparent transparent; transform: scale(0.3); }
画出橡皮:
.pencil .eraser { position: absolute; right: 0; width: 6em; height: 1.5em; background-color: lightpink; border-top: 1em solid pink; border-bottom: 1em solid lightcoral; border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em; }
用伪元素画出橡皮上的铁箍:
.pencil .eraser::before { content: ""; position: absolute; top: -1em; left: 0; width: 1.5em; height: 1.5em; background-color: silver; border-top: 1em solid lightgray; border-bottom: 1em solid gray; }
最后,增加阴影:
.pencil { filter: drop-shadow(5px 10px 3px gray); }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52464.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbKni?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comeh...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 ...
阅读 4115·2021-10-13 09:39
阅读 442·2021-09-06 15:02
阅读 3197·2019-08-30 15:53
阅读 996·2019-08-30 13:04
阅读 1966·2019-08-30 11:27
阅读 1952·2019-08-26 13:51
阅读 2042·2019-08-26 11:33
阅读 2871·2019-08-26 10:36