css怎么实现进度条 使用CSS渐变实现进度条功能
效果:
- 整体实现流程
- HTML结构
<div class="container">
<div class="inner"></div>
<div class="percentage" style="height: 17%"></div>
</div>
- CSS结构
body {
background: #e4e4e4;
}
.container {
width: 20px;
height: 180px;
position: relative;
}
.inner {
width: 20px;
height: 180px;
background: linear-gradient(0deg, #2d4264 50%, #0a1431 50%);
background-size: 100% 6px;
}
.percentage {
position: absolute;
bottom: 0;
width: 20px;
background: linear-gradient(to bottom, #24a1d8 0%, #3e25c8 100%);
}
.percentage::before {
content: "";
position: absolute;
bottom: 0;
height: 180px;
width: 20px;
background: linear-gradient(0deg, transparent 50%, #0a1431 50%);
background-size: 100% 6px;
}
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
