这篇博客介绍了如何利用CSS样式将一个简单的长方形进度条转变为具有圆角的过渡效果。通过设置大盒子和小盒子的样式，实现了在鼠标悬停时小盒子宽度从70%平滑过渡到100%，从而达到模拟进度条满格的效果。关键CSS属性包括`border-radius`用于创建圆角，`transition`实现过渡动画，以及`margin-top`和`border-radius`的特定组合来消除间隙。
首先里面是有两个盒子，大盒子包含小盒子。
<div class="bar">
<div class="bar_in">
</div>
</div>
CSS样式：
/*大盒子样式*/
.bar{
width: 130px;
height: 12px;
border: 1px solid red;
/*把长方形变成圆角矩形直接写高度就行了*/
border-radius: 12px;
}
小盒子样式
.bar_in{
width: 70%;
height: 12px;
background-color: red;
/* 添加-1进度条不会有空隙 */
margin-top: -1px;
/* 让盒子的左上角和左下角与大盒子重合 */
border-radius: 12px 0 0 12px;
/* 谁做过渡给谁加 */（也可以不添加过渡）
transition: all .5s;
}
.bar:hover .bar_in{
width: 100%;
border-radius: 12px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
