原文代码：https://segmentfault.com/a/1190000014768534#articleHeader1

HTML代码：

<html>

    <head>

        <link rel="stylesheet" href="index.css">

    </head>

    <body>

        <div class="card">

            <h2>Development Skills</h2>

            <p class="skill html">

                <span>HTML5</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>

    </body>

</html>

CSS代码：

html, body {

    margin:;

    padding:;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    /* linear-gradient：线性梯度；dimgray:暗灰色； silver: 银色 */

    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-align: center;

    text-transform: uppercase;

}

.card .skill{

    height: 50px;

}

.card .skill span{

    display: block;

}

.card .skill .level{

    transform: translateY(-1em);

    text-align: right;

    position: relative;

}

/* 用伪元素画出条形图 */

.card .skill .level::before,

.card .skill .level::after{

    content: '';

     width: 100%;

    height: 100%;

    position: absolute;

    top: 1.2em;

    left:;

}

.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 .html .level::after {

    background-size: 90% 1em;

}

.card .css .level::after {

    background-size: 95% 1em;

}

.card .javascript .level::after {

    background-size: 80% 1em;

}

.card .svg .level::after {

    background-size: 60% 1em;

}

.card .canvas .level::after {

    background-size: 75% 1em;

}

.card .skill:hover {

    background-color: #333;

}

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

  1. 如何用纯 CSS 创作条形图，不用任何图表库

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

  2. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  5. 74.纯 CSS 创作一台 MacBook Pro

    原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> &l ...

  6. 前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

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

  7. 75.纯 CSS 创作一支摇曳着烛光的蜡烛

    原文地址:https://segmentfault.com/a/1190000015580809 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:CSS 真强大! ...

  8. 73.纯 CSS 创作一只卡通狐狸

    原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...

  9. 72.纯 CSS 创作气泡填色的按钮特效

    原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...

随机推荐

  1. Python高效编程技巧

    如何在列表,字典,集合中根据条件筛选数据 1.过滤掉列表[-1,-2,-3,4,5,6]中的负数和0 方法1,for循环 data = [-1, -2, -3, 4, 5, 6] res = [] f ...

  2. CentOS 7.4 初次手记：第二章 CentOS安装步骤

    第二章 CentOS安装步骤... 18 第一节 下载... 18 第二节 分区参考... 18 第三节 安装... 19 I Step 1:引导... 19 II Step 2:配置... 20 I ...

  3. IDEA创建Springmvc项目

    项目主要步骤如下: 1.创建一个javaweb动态项目 2.导入springmvc demo所需要的jar包 3.生成项目war包 4.配置项目tomacat服务器 5.配置web.xml文件 6.编 ...

  4. android 退出程序解决内存释放so的问题

    做Android程序的时候发现一个问题,由于用到了so库,当应用程序退出了,但是手机变得很卡,点击"设置"查看应用程序,界面显示着可以点击"强制关闭". 由于这 ...

  5. apk重签名方法

    转载(http://www.51testing.com/?uid-115892-action-viewspace-itemid-223023) 1.      生成Android APK包签名证书 1 ...

  6. P2412高精度减法

    传送门 因为忘了带书回家,所以因为这道题我卡了半小时所以写篇博客“纪念”下 高精度减法中,如果被减数比减数小,就要用减数减去被减数.接下来的判断就是本题的核心.直接用strcmp是不行的,例如100与 ...

  7. PAT 乙级 1018 锤子剪刀布 (20) C++版

    1018. 锤子剪刀布 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 大家应该都会玩“锤子剪刀布”的游 ...

  8. Linux rpm包安装MySQL数据库问题总结

    1.安装包准备 2.按顺序安装以下安装包 一定要按顺序安装,因为前面的包是后面包的依赖 [root@iz2ze1bzpi3orra8lboxqiz mysql]# rpm -ivh Percona-S ...

  9. 观察者模式之一：java实现观察者模式

    <观察者模式之一:java实现观察者模式> <观察者模式之二:JDK自带的观察者模式> 1.初步认识 观察者模式的定义: 在对象之间定义了一对多的依赖,这样一来,当一个对象改变 ...

  10. [转]截图软件分享 - Snipaste

    http://chromecj.com/software/2018-10/1538.html https://zh.snipaste.com/download.html