使用纯 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 效果，真的不来看看？

产品经理：你这个效果不行，我想要一个五彩斑斓的黑！我：。。。