使用纯 CSS 实现一个动态技能进度条

持续创作，加快成长！这是我参加「日新计划 10 月更文挑战」的第 20 天，点击查看活动详情

前言

我们好，我是爱吃鱼的桶哥Z，最近学习 CSS 上瘾，刚好又学到了一个新的作用，今日就来共享给我们。老规矩，咱们仍是先来看一下终究完结的作用，如下所示：

在上图中，咱们能够看到设置了前端技术的熟练度，而且有一个进展条的作用，终究会停留在咱们设定的值上面。这个作用没有运用 JS 来开发，完全靠 HTML + CSS 来完结的，下面咱们就一同来学习一下这个作用吧！

根底骨架

在上面的作用中，咱们能够看到总共展现了三个技术的进展条，首先咱们先来编写一个技术的 html 代码，只需要将这一份 html 代码再仿制两份即可。相关的 html 代码如下：

<div class="container">
    <div class="box">
        <div class="shadow"></div>
        <div class="content">
            <div class="percent" data-text="Html" style="--num:85;">
                <div class="dot"></div>
                <svg>
                    <circle cx="70" cy="70" r="70"></circle>
                    <circle cx="70" cy="70" r="70"></circle>
                </svg>
            </div>
            <div class="number">
                <h2>85<span>%</span></h2>
            </div>
        </div>
    </div>
</div>

在上述的 html 中，经过编写的 class 称号就能看出咱们要设定的内容，其中 box 便是每个技术的外层，shadow 用于生成暗影；而在 percent 中，咱们设置了一个 data-text 特点，上面的值是 html，这个值用于咱们在终究作用中展现的文字，并经过设置 style 中的 --num 特点值，让终究的动画能够停留在对应的方位点。

在这段 html 中，咱们还增加了一个 svg，它里面包括两个 circle 元素，主要是用于生成圆。上述的 html 编写完结后，在不编写 css 的前提下，咱们就能在页面中看到一个圆了，具体的作用如下所示：

接下来咱们只需要仿制两份 box 的内容，就能得到三个不同的展现内容了，让咱们一同修改一下 html 代码，如下：

<div class="container">
    <div class="box">
        <div class="shadow"></div>
        <div class="content">
            <div class="percent" data-text="Html" style="--num:85;">
                <div class="dot"></div>
                <svg>
                    <circle cx="70" cy="70" r="70"></circle>
                    <circle cx="70" cy="70" r="70"></circle>
                </svg>
            </div>
            <div class="number">
                <h2>85<span>%</span></h2>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="shadow"></div>
        <div class="content">
            <div class="percent" data-text="css" style="--num:90;">
                <div class="dot"></div>
                <svg>
                    <circle cx="70" cy="70" r="70"></circle>
                    <circle cx="70" cy="70" r="70"></circle>
                </svg>
            </div>
            <div class="number">
                <h2>90<span>%</span></h2>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="shadow"></div>
        <div class="content">
            <div class="percent" data-text="js" style="--num:95;">
                <div class="dot"></div>
                <svg>
                    <circle cx="70" cy="70" r="70"></circle>
                    <circle cx="70" cy="70" r="70"></circle>
                </svg>
            </div>
            <div class="number">
                <h2>95<span>%</span></h2>
            </div>
        </div>
    </div>
</div>

上述的 html 代码便是终究完结的内容了，咱们能够看一下在没有增加 css 之前它们的样子，如图所示：

接下来就需要增加相关的 css 款式了，咱们一同来看一下根底的 css 代码，如下所示：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    background: #cfd1e1;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px 100px;
    flex-wrap: wrap;
}
.container .box {
    position: relative;
    width: 240px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

首先咱们经过 flex 布局将页面中的 box 元素都横向铺开，然后咱们再来设置一下 shadow 元素的款式，代码如下：

.container .box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(#fff, #fff, #e3e3e3);
    filter: blur(1px);
    z-index: 1;
}
.container .box::after {
    content: '';
    position: absolute;
    top: 1px;
    right: -1px;
    width: 20px;
    height: 100%;
    background: #9d9d9d;
    filter: blur(1px);
    z-index: 1;
}
.container .box .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #eee;
}
.container .box .shadow::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(100% + 5px);
    width: 100%;
    height: 200%;
    background: linear-gradient(rgba(0,0,0, 0.075), transparent);
    transform: skewX(45deg);
}
.container .box .shadow::after {
    content: '';
    position: absolute;
    bottom: -200%;
    left: calc(100% + 15px);
    width: 100%;
    height: 200%;
    background: linear-gradient(rgba(0,0,0, 0.075), transparent);
    transform: skewX(45deg);
}

在 shadow 标签上，主要运用了 before 和 after 伪类，然后设置了一个 background 特点，它的值是一个突变的作用，经过上述 css 完结的作用如下图所示：

能够看到当前的进展展现的暗影作用已经出来了，接下来咱们就继续完善进展条及数字的作用，相关的 css 代码如下：

.container .box .content {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(#dbdae1, #a3aaba);
    box-shadow: 5px 5px 5px rgba(0,0,0, 0.1),
    15px 15px 15px rgba(0,0,0, 0.1),
    20px 20px 20px rgba(0,0,0, 0.1),
    50px 50px 50px rgba(0,0,0, 0.1),
    inset 3px 3px 2px #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.container .box .content .percent {
    position: relative;
    width: 150px;
    height: 150px;
}
.container .box .content .percent::before{
    content: attr(data-text);
    position: absolute;
    inset: 20px;
    background: #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.75em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.container .box .content .percent svg {
    position: relative;
    width: 150px;
    height: 150px;
    transform: rotate(270deg);
}
.container .box .content .percent svg circle {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke-width: 3;
    stroke: rgba(0,0,0, 0.05);
    transform: translate(5px,5px);
}
.container .box .content .percent svg circle:nth-child(2) {
    stroke: #555;
    stroke-dasharray: 440;
    stroke-dashoffset: calc(440 - (440 * var(--num)) / 100);
    opacity: 0;
    animation: fadeIn 1s linear forwards;
    animation-delay: 2.5s;
}

经过前面的 html，咱们已经知道了真实的核心其实是 content 元素，它才是终究包括整个进展作用的元素，其中的 percent 元素是中间进展条的包裹层，而 number 元素则是底部显示的进展值；在 percent 元素中还包括一个 dot 元素和 svg 元素，这儿咱们先完结 svg 相关的款式编写，终究完结的作用如下所示：

上述的 css 编写，已经完结的根底的作用，接下来还剩下动画相关的内容，让咱们接着往下学！

运动的进展

前面的作用仅仅完结了根底的骨架搭建，现在还仅仅一个静态的作用，咱们需要让进展条能够动起来，让咱们一同来修改 css 代码吧，首先仍是先增加前面描绘的 dot 元素的相关代码，如下所示：

.container .box .content .percent .dot {
    position: absolute;
    inset: 5px;
    z-index: 10;
    animation: amimateDot 2s linear forwards;
}
.container .box .content .percent .dot::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #555;
    border-radius: 50%;
    transform: translateX(-50%);
}
@keyframes amimateDot {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(calc(3.6deg * var(--num)));
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

咱们给 dot 元素增加了一个 amimateDot 动画，而且它的履行时间是2s，履行完结后停留在终究一帧，让咱们一同看一下完结的作用，如下所示：

写到这儿，其实咱们的作用已经完结了 90% 了，只剩下终究一步了，咱们还需要修改 number 元素中的款式，css 代码如下：

.container .box .content .number {
    position: relative;
    inset: 0;
    opacity: 0;
    animation: fadeIn 1s linear forwards;
    animation-delay: 2.5s;
}
.container .box .content .number h2 {
    font-size: 2.5em;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container .box .content .number h2 span {
    font-weight: 300;
    font-size: 0.5em;
    margin-left: 5px;
} 

咱们给 number 元素添了一个 opacity 特点，让它一开始的透明度为0，经过2s的动画，再展现在页面中，这样就有一个渐隐渐现的作用。终究的完结作用和代码能够在这儿进行查看：

总结

经过给元素设置 data-text 特点，然后在 before 伪类中运用 attr() 来获取这个值，这样咱们就能够不经过 js 来完结内容在 html 中的展现；只需灵活运用好 --num 和 var() 的运用，咱们能够经过给 html 中的标签元素增加不同的特点值，从而完结更多有趣的作用。

终究，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢我们

往期回忆

『 纯 CSS 完结』运用 CSS 开发一个伪 3D 旋转圆柱

运用 CSS 编写一个五光十色的九宫格菜单

『 纯 CSS 完结』运用 CSS 开发一个炫酷旋转小球

哇哦，icon 还能这么玩？

『 实战』从0到1，带你开发开发一款令人惊叹的时钟特效

CSS 复刻 iPhone14，并接到了优弧的电话，还不快接电话？

今年中秋的月亮真美丽~

『 纯 CSS 完结』哇塞，彩虹还能这么玩？

『 禁止吸烟』纯 CSS 完结 | 禁烟也能做的这么酷炫

送你一个可爱的大圆脸，速来~

这么炫酷的 3D Menu 作用，真的不来看看？

产品经理：你这个作用不可，我想要一个五彩斑斓的黑！我：。。。