HTML+CSS小实例（进度条）

最新推荐文章于 2024-08-08 10:33:11 发布

梦见佳鑫

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量161

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_45846929/article/details/125941558

版权

效果展示：

网页源码：

HTML模块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>技能进度条</title>
    <link rel="stylesheet" href="css/ProgressBar.css">
</head>
<body>
<div>
    <ul>
        <li class="js">JavaScript</li>
        <li class="react">React</li>
        <li class="html5">HTML5</li>
        <li class="css3">CSS3</li>
        <li class="sketch">Sketch</li>
    </ul>
</div>
</body>
</html>

CSS模块：

html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

* {
    box-sizing: border-box;
}

div {
    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;
}

li:before, li:after {
    content: "";
    display: block;
    height: 16px;
    width: 100%;
    background-color: #1f4a59;
    position: absolute;
    bottom: -28px;
    border-radius: 6px;
}

li:before {
    box-shadow: 0 0 6px rgba(75, 207, 250, 0.2);
}

li:after {
    background-image: linear-gradient(90deg, #0fbcf9, #34e7e4);
}

li:after {
    animation: 1.2s forwards ease-in-out;
}

.js:after {
    animation-name: js;
}

.react:after {
    animation-name: react;
}

.html5:after {
    animation-name: html5;
}

.css3:after {
    animation-name: css3;
}

.sketch:after {
    animation-name: sketch;
}

@keyframes js {
    from{
        width: 0;
    }to{
         width: 90%;
     }
}
@keyframes react {
    from{
        width: 0;
    }to{
         width: 80%;
     }
}
@keyframes html5 {
    from{
        width: 0;
    }to{
         width: 70%;
     }
}
@keyframes css3 {
    from{
        width: 0;
    }to{
         width: 60%;
     }
}
@keyframes sketch {
    from{
        width: 0;
    }to{
         width: 50%;
     }
}

参考：b站up主 叫我凤凰Blanco