原文代码：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. 【转】CSR蓝牙驱动程序引起的Win7奇怪问题

    https://www.yanning.wang/archives/299.html @echo off title 恢复系统 REM 变量初始化 rem CSR路径 set CSRPath=&quo ...

  2. Action<T> Delegate

    来源:https://docs.microsoft.com/zh-cn/dotnet/api/system.action-1?view=netframework-4.7.2 Action<T&g ...

  3. 【Spring学习笔记-3】国际化支持

    [Spring]国际化支持 一.总体结构: 两个国际化资源中的内容: 二.程序 2.1  配置Spring上下文 beans.xml文件 <?xml version="1.0" ...

  4. bzoj5019: [Snoi2017]遗失的答案

    Description 小皮球在计算出答案之后,买了一堆皮肤,他心里很开心,但是一不小心,就忘记自己买了哪些皮肤了.==|||万 幸的是,他还记得他把所有皮肤按照1-N来编号,他买来的那些皮肤的编号( ...

  5. 阿里云kubernetes被minerd挖矿入侵

    阿里云kubernetes被minerd挖矿入侵 # kubectl get rc mysql1 -o yaml apiVersion: v1 kind: ReplicationController ...

  6. unittest框架 assertEqual 报错 让其出现中文的方法(这个问题出现时 我找了老半天) 还追加了 报错信息自定义的方法

    1,发现如果assertEqual里面放的是变量,不会展示中文出来 2,放的是中文(注意前面加u)就可以展示中文出来 改进后的方法:(可以放入变量去对比还可以展示中文的方法)

  7. [转][Java]尝试解决Java多行字符串的编辑问题

    转自:https://blog.csdn.net/jiuwuerliu/article/details/51207045 参考了:https://www.v2ex.com/amp/t/445522 除 ...

  8. dos命令及github介绍

    dos命令:(不区分大小写)(尽量不要用汉字) 1.打开终端的快捷方式: window+r 输入cmd 或点击 开始栏 输入cmd 2.终端的目录:c盘默认 user/administator: 想在 ...

  9. VLAN IEEE802.1Q

    一. VLAN产生原因-广播风暴 传统的局域网使用的是HUB,HUB只有一根总线,一根总线就是一个冲突域.所以传统的局域网是一个扁平的网络,一个局域网属于同一个冲突域.任何一台主机发出的报文都会被同一 ...

  10. maven工程强制更新 ，下载源码操作

    看图,在window->preferences->maven , 勾选图中的选项就可以下载源码包了,