淘先锋技术网

首页 1 2 3 4 5 6 7

CSS可以实现各种各样的效果,今天我们来学习如何使用CSS实现一个时间条。

/*先定义样式*/
.progress {
background-color: #ddd;
height: 10px;
width: 100%;
margin-bottom: 20px;
border-radius: 5px;
}
.bar {
background-color: #4CAF50;
height: 100%;
width: 0%;
border-radius: 5px;
transition: width 0.5s ease-in-out;
}
.time {
font-size: 14px;
margin-top: 5px;
text-align: right;
color: #555;
}
/*在HTML中插入代码*/

0:00 / 3:45

以上就是实现时间条的基本样式,我们通过修改.bar的宽度实现进度条的动态效果。