摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。源代码下载请从下载。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/zhang-ou/pen/XqzGLp
可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/c/cJdEgc9
源代码下载请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/015-development-skills-card
代码解读定义 dom,最外层的容器是卡片,内含一个标题,和一个技能说明,分别描述技能的名称和级别:
Development Skills
HTML5 90%
居中显示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(dimgray, silver, silver, dimgray); }
技能卡片布局:
.card { width: 400px; background: linear-gradient(#333, dimgray); box-sizing: border-box; padding: 20px; font-family: sans-serif; color: white; letter-spacing: 0.1em; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
文字布局:
.card h2 { text-transform: uppercase; text-align: center; } .card .skill { height: 50px; } .card .skill span { display: block; } .card .skill .level { transform: translateY(-1em); text-align: right; }
用伪元素画出条形图:
.card .skill .level { position: relative; } .card .skill .level::before, .card .skill .level::after { content: ""; position: absolute; top: 1.2em; left: 0; width: 100%; height: 100%; } .card .skill .level::before { border: 1px solid mediumspringgreen; border-radius: 0.2em; height: 105%; } .card .skill .level::after { background-image: linear-gradient(to right, mediumspringgreen, mediumspringgreen); background-repeat: no-repeat; background-position: top 0.1em left 0.1em; }
设置条形图的填充比例:
.card .skill.html .level::after { background-size: 90% 1em; }
dom 增加多个技能,每个技能用命名不同的样式类:
Development Skills
HTML 90%
CSS 95%
JavaScript 80%
SVG 60%
Canvas 75%
分别定义每个技能的条形图宽度:
.card .skill.css .level::after { background-size: 95% 1em; } .card .skill.js .level::after { background-size: 80% 1em; } .card .skill.svg .level::after { background-size: 60% 1em; } .card .skill.vue .level::after { background-size: 75% 1em; }
最后,增加一点交互效果:
.card .skill:hover { background-color: #333; }
大功告成!
知识点linear-gradient() https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
translateY() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY
background-image https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
background-repeat https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52322.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。源代码下载请从下载。 showImg(https://segmentfault.com/img/bVbb1VX?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepe...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
阅读 1833·2021-11-25 09:43
阅读 2121·2021-11-19 09:40
阅读 3373·2021-11-18 13:12
阅读 1715·2021-09-29 09:35
阅读 614·2021-08-24 10:00
阅读 2486·2019-08-30 15:55
阅读 1687·2019-08-30 12:56
阅读 1765·2019-08-28 17:59