CSS3实现步骤进度条效果

最新推荐文章于 2024-04-23 18:06:38 发布

卡夫卡的baby

最新推荐文章于 2024-04-23 18:06:38 发布

阅读量405

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125966198

版权

CSS3实现步骤进度条效果

html:

<!-- div.mian+div.item*5 -->
    <div class="mian">
        <div class="item">需求讨论</div>
        <div class="item">产品设计</div>
        <div class="item">开发制作</div>
        <div class="item">功能测试</div>
        <div class="item">竣工交付</div>
    </div>

CSS样式：

<title>CSS3实现步骤进度条效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            min-height: 100vh;
            /* radial-gradient() 径向渐变 */
            background-image: radial-gradient(#fff,#f1f1f1);
        }
        .mian{
            width: 80%;
            margin: 50px auto 0;
            /* outline: 1px dashed yellow; */
            overflow: h