原文代码：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. 自定义Write节点的afterrender属性

    由于nuke中的write节点提供了beforerender,afterrender这类事件,我们想添加一些功能只需要在这里面敲入代码即可.事件一旦发生,自然会触发我们敲入的co de.   Nuke ...

  2. js控制html5 【video】标签中视频的播放和停止

    需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...

  3. Ubuntu16.04系统重装***

    首先准备一个Live CD,就是Ubuntu的安装盘. 备份原理就是将系统文件压缩打包.由于Linux系统所有都是文件,故,只需要将系统打包即可.当然,必须除了当前系统运行中的文件以及临时文件. 打包 ...

  4. 解决nginx转发websocket报400错误

    解决nginx转发websocket报400错误 说明 由于个人服务器上面有多个项目,配置了二级域名,需要对二级域名进行转发,在转发工作这快采取了大名鼎鼎的nginx.在这之前所有的项目运行转发都没问 ...

  5. IntelliJ IDEA maven springmvc+shiro简单项目

    搭建springmvc简单步骤如:http://www.cnblogs.com/grasp/p/9045242.html,这点就不在描述了. 新建和设置完工程的目录后,结构如下: pom.xml文件内 ...

  6. 【Darwin学习笔记】之获取系统处理器数量的方法

    阅读Darwin源码的时候看到这个方法,感觉挺有用处,且考虑了多种平台下的实现方式,直接贴代码,以后说不定会用到~ 单一种平台下的实现方法可能很容易,但是把这些个系统都收集在一起,在一个函数中实现还是 ...

  7. zTree分批异步加载方式下实现节点搜索功能(转载)

    原文地址:https://segmentfault.com/a/1190000004657854 最近公司做一个项目用到zTree,zTree功能强大就不用多说了,相信用过的人都知道.       公 ...

  8. Scala的内建控制结构

    Scala中的内建控制机构仅有if.while.for.try.match和函数调用.虽然Scala的基础控制结构少,但也足以支持指令式语言里所有的实质内容.因为它们都能产生值,有助于缩短代码. 程序 ...

  9. 信息安全-加密：DES 加密

    ylbtech-信息安全-加密:DES 加密 DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法,1977年被美国联邦政府的国家标准局确定为联邦资 ...

  10. [ZZ]知名互联网公司Python的16道经典面试题及答案

    知名互联网公司Python的16道经典面试题及答案 https://mp.weixin.qq.com/s/To0kYQk6ivYL1Lr8aGlEUw 知名互联网公司Python的16道经典面试题及答 ...