使用CSS实现的平面阴影进度条效果

最新推荐文章于 2025-06-05 20:53:03 发布

原创最新推荐文章于 2025-06-05 20:53:03 发布 · 762 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #进度条设计

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种意外创建的CSS平面阴影进度条效果，强调了HTML的语义性和可理解性。在不依赖CSS和JS的情况下，文档仍然保持可用性。加载CSS后，进度条样式增强，但在IE11等不支持border-radius的浏览器中，表现为无圆角的独特风格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来只是想做个简单的两色平面进度条的，结果误打误撞做出了个平面阴影效果，感觉效果完爆之前的构想图，简直是惊喜！！

整体效果如下：

整体设计方面，主要照顾到的是HTML文档的语义性，即使在不使用CSS和JS时也能够保证文档可以理解。元素使用<span>语义性也较强，使用了两层嵌套结构，外层可理解为全百分比（即100%），内层则可理解为当前百分比。

HTML代码如下：

<ul>
	<li>HTML
		<span class="sklevel"><span>0.80</span></span>
	</li>
	<li>CSS
		<span class="sklevel"><span>0.85</span></span>
	</li>
	<li>JavaScript
		<span class="sklevel"><span>0.75</span></span>
	</li>
	<li>Python
		<span class="sklevel"><span>0.80</span></span>
	</li>
	<li>Java
		<span class="sklevel"><span>0.50</span></span>
	</li>
	<li>C
		<span class="sklevel"><span>0.65</span></span>
	</li>
	<li>PhotoShop
		<span class="sklevel"><span>0.75</span></span>
	</li>
</ul>

未加载CSS和JS的情况下的页面效果如下，信息基本上还是可用的：

CSS代码如下：

span.sklevel {
    position: absolute;
    right: 0;
    top: 25%;
    width: 120px;
    height: 50%;
    background: #ccc;
    border-radius: 5px; /*设为高度的一半最佳*/
}
span.sklevel span {
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 90%;  /*可变进度条高度稍低于进度槽*/
    line-height: 100%;
    color: #ccc;
    font-size: 50%;
    text-align: center;
    background: #666;
    border-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transition: width 1s; /*添加载入动画*/
}

仅加载CSS后的页面效果如下，信息基本可用，样式的话可能会让用户产生些许误解：

JavaScript代码如下，图省事就没有写原生了：

(function($) {
    $(function() {
        //根据进度值（0～1）调整进度条长度
        (function() {
            var sklevel_span = $("span.sklevel span");

            for (var i=0, len=sklevel_span.length; i<len; i++) {
                var lv = +$(sklevel_span[i]).text();
                lv = lv > 1 ? 100 : lv * 100;
                $(sklevel_span[i]).css({"width": lv + "%"}).text(""); //调整进度条长度并清除文字说明
            }
        }());
    });
}(jQuery));

对兼容性方面没有过多地测试，Safari9.0.3和Chrome48下都表现正常，IE11由于不支持border-radius属性，没有表现出圆角来，也算是另一种风格吧。