CSS3渐变进度条效果
/* 基本HTML结构 */
<div class="progress-bar">
<div class="progress"></div>
</div>
/* CSS样式 */
.progress-bar {
width: 100%;
background-color: #e0e0e0; /* 进度条背景色 */
border-radius: 4px; /* 圆角边框 */
overflow: hidden; /* 确保子元素不超出容器 */
}
.progress {
width: 50%; /* 假定进度为50% */
height: 20px; /* 进度条高度 */
background-image: linear-gradient(to right, #578ebe, #3e7bb7); /* 渐变色 */
border-radius: 4px; /* 圆角边框 */
transition: width 0.5s ease-in-out; /* 动画过渡效果 */
}
/* 当进度变化时，.progress的宽度会发生变化，触发动画 */这个简单的CSS样式定义了一个具有渐变效果的进度条，当宽度变化时，它会有一个平滑的过渡效果。这个例子展示了如何使用CSS渐变来增强进度条的视觉效果，并且演示了如何通过transition属性添加动画效果。
评论已关闭