我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

👨‍🎓作者简介：一位喜欢写作，计科专业大三菜鸟

🏡个人主页：starry陆离

🕒首发日期：2022年9月23日星期五

🌌上期文章：『首期文章』

📚订阅专栏：『16个实用的CSS样式』

1.简介

对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于CSS代码的编写，能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式，因为自己也是初学者，所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是静态技能条

来看一下最终效果吧！！！

2.布局设计

布局设计很简单就是5个列表标签。

 <main>
       <ul>
         <li class="java">Java</li>
         <li class="android">Android</li>
         <li class="kotlin">Kotlin</li>
         <li class="mysql">MySQL</li>
         <li class="jetpack">JetPack</li>
       </ul>
     </main>

3.样式设计

3.1列表美化

首先我们给背景设置一个颜色，并设置列表标签的属性，特别是list-style去除前面的点

 ​
 main {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: #1e272e;
 }
 ​
 ul {
   width: 500px;
 }
 ​
 li {
   list-style: none;
   color: #d2dae2;
   font-size: 18px;
   margin: 48px 0;
   position: relative;
 }

可以看到此时的样式如下：

可以看到我们的ul标签占据了500px的宽度，然后其中的li标签各自间距48px，因为我们使用了盒子属性，所以这些计算无需我们进行，标签就可以自动对齐。

3.2技能条美化

接下来我们通过伪元素::after为li标签设置一个带圆角的长条形，然后为其添上一层渐变；

 li::after {
   content: "";
   display: block;
   height: 16px;
   width: 100%;
   background-color: #1f4a59;
   position: absolute;
   bottom: -28px;
   border-radius: 6px;
 }
 ​
 ​
 li::after {
   background-image: linear-gradient(90deg, #0fbcf9, #34e7e4);
 }
 ​

3.3动画帧

最后又到了我们设计动画帧的时候了，因为我们有五个li标签都需要设置动画帧，所以啊我们直接将动画的一些共同的属性设置给ul标签，让li去继承使用。

然后分别定义五个标签的动画的名字，并设置动画帧。

 ​
 li::after {
   animation-duration: 1.2s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-in-out;
 }
 ​
 .java::after {
   animation-name: java;
 }
 ​
 .android::after {
   animation-name: android;
 }
 ​
 .kotlin::after {
   animation-name: kotlin;
 }
 ​
 .mysql::after {
   animation-name: mysql;
 }
 ​
 .jetpack::after {
   animation-name: jetpack;
 }

4.结语

到此为止一个简单的静态技能条就做好啦，当然在常见的网站中不会这样去配色哈，还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。