zoukankan      html  css  js  c++  java
  • 15.纯 CSS 创作条形图,不用任何图表库

    原文代码: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: 0;
        padding: 0;
        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: 0;
    }
    .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;
    }
    作者:人生与戏
    本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    Apache 阿帕奇 配置运行环境
    2019年6月多校联训b层——搜索算法 Problem A 宽搜 营救
    西安集训B Day1 test 问题 C: 小明的城堡
    西安集训B层Day1 test 问题 A: 旅行日记
    二分答案—洛谷P1182 数列分段`Section II`
    2019.5.25 Noip模拟测试2 T2题解
    2019.5.25 Noip模拟测试2 T1题解
    DP专题练习 toasting
    2019.5.1 DP专题训练 山峰数(hill)
    React 点击按钮显示div与隐藏div
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10236281.html
Copyright © 2011-2022 走看看