前端日常实践：15#视频演示如何用纯CSS制作条形图，没有任何图表库
时间：2023-04-05 19:12:55
HTML5
效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击链接全屏预览。https://codepen.io/zhang-ou/pen/XqzGLp互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cJdEgc9源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/015-development-skills-card代码解读定义了dom，最外层的容器是一个card，里面包含一个title和一个skillDescription，分别描述技能的名称和等级：开发技能
HTML590%
居中显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(dimgray,silver,silver,dimgray);}技能卡布局：.card{width:400px;背景：线性渐变（#333，dimgray）；框大小：边框框；填充：20px；字体系列：无衬线字体；白颜色;字母间距：0.1em；box-shadow:020px50pxrgba(0,0,0,0.5);}文本布局：.cardh2{text-transform:uppercase;text-align:center;}.card.skill{height:50px;}.card.skillspan{display:block;}.card.skill.level{transform:translateY(-1em);文本对齐：右；}用伪元素绘制条形图：.card.skill.level{position:relative;}.card.skill.level::before,.card.skill.level::after{content:'';位置：绝对；顶部：1.2em；左：0；宽度：100%；height:100%;}.card.skill.level::before{border:1pxsolidmediumspringgreen;嗯；height:105%;}.card.skill.level::after{background-image:linear-gradient(toright,mediumspringgreen,mediumspringgreen);背景重复：不重复；background-position:top0.1emleft0.1em;}设置条形图的填充比例：.card.skill.html.level::after{background-size:90%1em;}dom添加多个技能，每个技能使用具有不同名称的样式类：
DevelopmentSkills
HTML90%CSS95%JavaScript80%SVG60%Canvas75% 分别定义每个技能的bar宽度：.card.skill.css.level::after{background-size:95%1em;}.card.skill.javascript.level::after{background-size:80%1em;}.card.skill.svg.level::after{background-size:60%1em;}.card.skill.canvas.level::after{背景-size:75%1em;}最后，添加一点交互：.card.skill:hover{background-color:#333;}就大功告成了！知识点linear-gradient()https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradienttranslateY()https://developer.mozilla.org/en-US/docs/Web/CSS/转换函数/translateYbackground-图像https://developer.mozilla.org/en-US/docs/Web/CSS/background-imagebackground-repeathttps://developer.mozilla.org/en-US/docs/Web/CSS/background-重复背景位置https://developer.mozilla.org/en-US/docs/Web/CSS/background-positionbackground-sizehttps://developer.mozilla.org/en-US/docs/Web/CSS/background-尺寸
