CSS3进度条百分比是一种在网页设计中常见的效果,通过CSS3技术可以很方便地制作出一个简单的进度条来,下面我们来看具体的实现方法。.container{ width: 80%; height: 20
CSS3进度条百分比是一种在网页设计中常见的效果,通过CSS3技术可以很方便地制作出一个简单的进度条来,下面我们来看具体的实现方法。
.container{ width: 80%; height: 20px; background-color: #ddd; border-radius: 10px; margin: 30px auto; overflow: hidden; } .progress{ width: 50%; height: 100%; background-color: #4CAF50; border-radius: 10px; animation: progress 2s ease; } @keyframes progress{ 0%{ width: 0%; } 100%{ width: 50%; } }
以上代码中,我们首先创建了一个容器(.container)作为进度条的背景,设置宽度、高度、背景颜色、边框圆角等样式。然后再创建一个进度元素(.progress),并设置其宽度为50%,高度为100%,背景颜色为绿色(#4CAF50),边框圆角等样式。接着通过CSS3动画,让进度条从0%到50%的宽度变化,实现一个简单的进度条效果。
我们可以通过修改进度元素的宽度百分比来改变进度条的进度,例如将宽度改为70%就会呈现出一个70%的进度条。
.progress{ width: 70%; height: 100%; background-color: #4CAF50; border-radius: 10px; animation: progress 2s ease; }
这样,一个简单的CSS3进度条就完成了。在实际运用中,我们可以通过JavaScript将进度条与其他数据相结合,实现更加丰富的交互效果。
粉丝
0
关注
0
收藏
0