原文代码：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. dom响应事件

    DOMsubtreeModified.DOMNodeInserted.DOMNodeRemoved.DOMAttrModified.DOMCharacterDataModified 当底层DOM结构发 ...

  2. 黄聪：PHP发送邮件出现Connection: opening to ssl://的解决办法

    PHP.ini文件开启下面2个功能: extension=php_sockets.dll extension=php_openssl.dll

  3. rsync同步目录

    -a, --archive archive mode; equals -rlptgoD (no -H,-A,-X) -r, --recursive recurse into directories - ...

  4. springboot工程添加404页面

    首先在/src/main/resources下创建文件夹/public/error 在文件夹里创建html页面,jsp页面不可以. <html> <body> <img ...

  5. selectedIndex 属性

    selectedIndex 属性可设置或返回下拉列表中被选选项的索引号. 注释:若允许多重选择,则仅会返回第一个被选选项的索引号. 语法 selectObject.selectedIndex=numb ...

  6. Bisecting KMeans (二分K均值)算法讲解及实现

    算法原理 由于传统的KMeans算法的聚类结果易受到初始聚类中心点选择的影响,因此在传统的KMeans算法的基础上进行算法改进,对初始中心点选取比较严格,各中心点的距离较远,这就避免了初始聚类中心会选 ...

  7. 学习笔记之JavaScript

    JavaScript 教程 | 菜鸟教程 http://www.runoob.com/js/js-tutorial.html JavaScript 是 Web 的编程语言. 所有现代的 HTML 页面 ...

  8. [VS2013]发布网站时修改配置文件

    本文来自:https://msdn.microsoft.com/en-us/library/ee942158.aspx#encrypt_webconfig Web Deployment FAQ for ...

  9. java.util.base64报错解决

    java.util.Base64 这个类,它是在 JDK 1.8 的时候加入的,之前版本的标准库没有这个类. eclipse更换jdk1.8就可以了了.

  10. [UE4]单机游戏改网络游戏，不完全清单

    把Actor的复制打开 中腰数据的复制打开,且只在服务器修改(比如角色属性血量) 需要同步的Actor,不在客户端Spawn 客户端的操作,先报告到服务器,服务器再广播到所有客户端 某些逻辑只在服务器 ...