效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

在线演示

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,最外层的容器是卡片,内含一个标题,和一个技能说明,分别描述技能的名称和级别:

<div class="card">
<h2>Development Skills</h2>
<p class="skill html">
<span>HTML5</span>
<span class="level">90%</span>
</p>
</div>

居中显示:

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 增加多个技能,每个技能用命名不同的样式类:

<div class="card">
<h2>Development Skills</h2>
<p class="skill html">
<span>HTML</span>
<span class="level">90%</span>
</p>
<p class="skill css">
<span>CSS</span>
<span class="level">95%</span>
</p>
<p class="skill javascript">
<span>JavaScript</span>
<span class="level">80%</span>
</p>
<p class="skill svg">
<span>SVG</span>
<span class="level">60%</span>
</p>
<p class="skill canvas">
<span>Canvas</span>
<span class="level">75%</span>
</p>
</div>

分别定义每个技能的条形图宽度:

.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;
}

大功告成!

知识点

原文地址:https://segmentfault.com/a/1190000014768534

如何用纯 CSS 创作条形图,不用任何图表库的更多相关文章

  1. 15.纯 CSS 创作条形图,不用任何图表库

    原文代码:https://segmentfault.com/a/1190000014768534#articleHeader1 HTML代码: <html> <head> &l ...

  2. 如何用纯 CSS 创作文本滑动特效的 UI 界面

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...

  3. 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...

  4. 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教 ...

  5. 如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...

  6. 如何用纯 CSS 创作一个渐变色动画边框

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...

  7. 如何用纯 CSS 创作一种侧立图书的特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视 ...

  8. 如何用纯 CSS 创作一个冒着热气的咖啡杯

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...

  9. 如何用纯 CSS 创作一种文字断开的交互特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视 ...

随机推荐

  1. 如何才能优雅地书写JS代码

    第一:关于匿名函数的使用 要避免全局变量泛滥, 可以考虑使用匿名函数, 把不需要在外部访问的变量或者函数限制在一个比较小的范围内. 例如以下代码: <script> function fu ...

  2. LuoguP1370 Charlie的云笔记序列 【dp】By cellur925

    题目传送门 题目大意:给你一个序列,求出它所有区间的本质不同的子序列个数.(空序列也算作本质不同),数据范围$1e5$. 我们肯定是不能一个个枚举区间的...而且这个复杂度下,也就大概$O(n)$或$ ...

  3. C语言归并排序(合并排序)算法及代码

    归并排序也称合并排序,其算法思想是将待排序序列分为两部分,依次对分得的两个部分再次使用归并排序,之后再对其进行合并.仅从算法思想上了解归并排序会觉得很抽象,接下来就以对序列A[0], A[l]…, A ...

  4. Jquery | 基础 | 属性过滤选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 【Tsinsen】A1280. 最长双回文串

    Bryce1010模板 http://www.tsinsen.com/A1280### 题目分析:记录一个点向后和向前的最长回文串,然后就是max(Llen[i]+Rlen[i+1])了. #incl ...

  6. 【LeetCode 337 & 329. memorization DFS】House Robber III

    /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...

  7. A. The Fault in Our Cubes 暴力dfs

    http://codeforces.com/gym/101257/problem/A 把它固定在(0,0, 0)到(2, 2, 2)上,每次都暴力dfs检查,不会超时的,因为规定在这个空间上,一不行, ...

  8. angularjs之ng-mode获取lobject类型里的键值

    有时候数据库定义的时候,用一个对象来代表某个属性,之后直接访问对象就可以获取全部该对象的属性,但是有时需求访问对象中包含中的键值,引用键值的时候可以直接用.来获取对象的键值,比如 对象points: ...

  9. 转 Java 208道面试题及部分答案 补充部分答案

    转自https://www.cnblogs.com/chen1005/p/10481102.html   ---恢复内容开始--- 一.Java 基础 1.JDK 和 JRE 有什么区别? 答:JRE ...

  10. 修改他人电脑的Windows登录密码

    在别人电脑已登录Windows的情况下: 打开控制面板 -> 管理工具 -> 计算机管理   或者  对Win图标单击右键 -> 计算机管理 -> 本地用户和组 -> 用 ...