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的宽度实现进度条的动态效果。