原文代码：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. MySQL Master High Available 源码篇

    https://m.aliyun.com/yunqi/users/1287368569594542/articles https://yq.aliyun.com/articles/59233 MySQ ...

  2. 【nginx】之常用命令

    查看版本号: nginx -s reload  :修改配置后重新加载生效 nginx -s reopen  :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试ngi ...

  3. “Hello world! ”

    12.1第一篇笔记 Python  方向:1.web全栈    2.人工智能 (java基础)   3. 爬虫开发   4.数据分析(金融) 6个月学习:需完成8-10万行代码的目标 下一步学习方向 ...

  4. Null hypothesis TypeⅠerror Type Ⅱ error

    Null hypothesis usually express the phenomenon of no effect or no difference. TypeⅠerror is the inco ...

  5. 《Java并发编程实战》笔记-OneValueCache与原子引用技术

    /** * NumberRange * <p/> * Number range class that does not sufficiently protect its invariant ...

  6. redis（Springboot中封装整合redis,java程序如何操作redis的5种基本数据类型）

    平常测试redis操作命令,可能用的是cmd窗口 操作redis,记录一下 java程序操作reids, 操作redis的方法 可以用Jedis ,在springboot 提供了两种 方法操作 Red ...

  7. 改变端口的方法phpstudy

    document.ready 一个页面可以用无数次: window.onload 一个页面只能用一次,并且在最顶层: 用户交互:用户在网页上的一些行为: 服务交互:Ajax: 组件:(白话:按照我的规 ...

  8. spring中关于<context:component-scan>的使用说明(转)

    https://blog.csdn.net/liuxingsiye/article/details/52171508 通常情况下我们在创建spring项目的时候在xml配置文件中都会配置这个表情,配置 ...

  9. go语言学习--语法糖

    语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有 ...

  10. redis-5.0.3集群搭建

    首先部署redis-5.0.3,请参考我的另一篇文章 https://www.cnblogs.com/djlsunshine/p/10592174.html 启动redis服务 # redis-ser ...