在HTML/CSS设计的捐赠进度条中,当bar达到90%+时中断,要使文本保持在原处或随着条形图的增加而缩小,可以通过以下几种方式实现:
.text {
position: absolute;
top: 50%;
left: 0;
transform: scale(1);
transition: transform 0.5s ease;
}
.bar {
/* 进度条样式 */
}
.bar.progress {
/* 进度达到90%+时的样式 */
}
.bar.progress .text {
transform: scale(0.5); /* 缩小为原大小的一半 */
}
offsetWidth
属性来获取进度条的宽度,并根据需要的缩放比例计算文本的缩放大小。例如:var bar = document.querySelector('.bar');
var text = document.querySelector('.text');
function updateTextSize() {
var barWidth = bar.offsetWidth;
var textScale = 1; // 默认缩放比例为1
if (barWidth > /* 进度达到90%时的宽度 */) {
textScale = /* 计算缩放比例,根据进度条宽度与文本原始大小的比例 */;
}
text.style.transform = 'scale(' + textScale + ')';
}
// 在进度条发生改变时调用updateTextSize函数
以上两种方法都可以实现在进度条达到90%+时,保持文本在原处或随着进度条增加而缩小。具体选择哪种方式取决于实际需求和使用的技术栈。
领取专属 10元无门槛券
手把手带您无忧上云