如何用纯 CSS 创作条形图,不用任何图表库
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/zhang-ou/pen/XqzGLp
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
请从 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;
}
大功告成!
知识点
- 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://segmentfault.com/a/1190000014768534
如何用纯 CSS 创作条形图,不用任何图表库的更多相关文章
- 15.纯 CSS 创作条形图,不用任何图表库
原文代码:https://segmentfault.com/a/1190000014768534#articleHeader1 HTML代码: <html> <head> &l ...
- 如何用纯 CSS 创作文本滑动特效的 UI 界面
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QrxxaW 可交互视频教 ...
- 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...
- 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教 ...
- 如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 如何用纯 CSS 创作一种侧立图书的特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一种文字断开的交互特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视 ...
随机推荐
- (5)Javascript的表达式
Javascript的表达式 表达式是一个语句的集合,计算结果是个单一值,然后该结果被javascript归入下列数据类型之一:布尔.数字.字符串.对象等.表达式是具有一定的值,用操作符把常量和变量连 ...
- PJzhang:左耳朵耗子-陈皓
猫宁!!! 参考链接:https://coolshell.cn/haoel 左耳朵耗子原名陈皓,那个是他的网络ID,在我眼中是个值得尊敬的程序员,虽然我对他真人没什么了解. 这是他博客的自我介绍: 2 ...
- oracle错误:1067进程意外终止
oracle错误:1067进程意外终止我Oracle安装完了之后可以运行的 ,过了一段时间不可以了,就上网找了一下,原来是自己的ip已经改变.我一直使用IP地址的. 将D:\oracle\produc ...
- PostgreSQL - 修改默认端口号
升级PostgreSQL遇到的问题 之前将PostgreSQL从9.5升级到了10.3版本,安装时将端口设置成了5433,(默认是5432),后来发现在使用psql来restore db会发生语法错误 ...
- jQuery中的.html()和.text()及.val()区别
https://www.cnblogs.com/zhang-xun/p/6766264.html
- Java三大特性之---封装
封装从字面上来理解就是包装的意思,专业点就是信息隐藏,是指利用抽象数据类型将数据和基于数据的操作封装在一起,使其构成一个不可分割的独立实体,数据被保护在抽象数据类型的内部,尽可能地隐藏内部的细节,只保 ...
- Coco dfs 或者 状压dp。...
C -- Coco Time Limit:1s Memory Limit:64MByte Submissions:148Solved:85 DESCRIPTION Coco just learned ...
- 单页Html及Android App供小孩学习常用汉字
为了检验及帮助小孩学习常用汉字,简单开发本网页应用: 常用汉字是按使用频率排序的,来源于网上: 该简单应用 有Android APP下载 “学习常用汉字_20150910.apk” 单页Html 示例 ...
- Android学习笔记(十九) OkHttp
一.概述 根据我的理解,OkHttp是为了方便访问网络或者获取服务器的资源,而封装出来的一个工具包.通常的使用步骤是:首先初始化一个OkHttpClient对象,然后使用builder模式构造一个Re ...
- Android中进程与线程及如何在子线程中操作UI线程
1. Android进程 一个应用程序被启动时,系统默认创建执行一个叫做"main"的线程.这个线程也是你的应用与界面工具包(android.widget和android.view ...