15.纯 CSS 创作条形图，不用任何图表库

时间：2019-01-07 23:32:49 阅读：263 评论：0 收藏：0 [点我收藏+]

标签：sans style segment 边框梯度 spring 伪元素 absolute java

原文代码：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;
}

15.纯 CSS 创作条形图，不用任何图表库

标签：sans style segment 边框梯度 spring 伪元素 absolute java

原文地址：https://www.cnblogs.com/FlyingLiao/p/10236281.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行