[分享]css3动画进度条代码

CSS3动画进度条是一种非常实用的特效，在网页中可以用来展示任务进度、音乐播放进度以及用户操作进度等信息。下面是一个完整的CSS3动画进度条代码。.progressbar { : relative; ...

CSS3动画进度条是一种非常实用的特效，在网页中可以用来展示任务进度、音乐播放进度以及用户操作进度等信息。下面是一个完整的CSS3动画进度条代码。

<span style="color: #ff9900">.progress-bar {</span>
  <span style="color: #ff9900">position: relative;</span>
  <span style="color: #ff9900">width: 100%;</span>
  <span style="color: #ff9900">height: 20px;</span>
  <span style="color: #ff9900">background-color: #ccc;</span>
  <span style="color: #ff9900">border-radius: 10px;</span>
<span style="color: #ff9900">}</span>

<span style="color: #ff9900">.progress-bar::before {</span>
  <span style="color: #ff9900">content: "";</span>
  <span style="color: #ff9900">position: absolute;</span>
  <span style="color: #ff9900">top: 0;</span>
  <span style="color: #ff9900">left: 0;</span>
  <span style="color: #ff9900">bottom: 0;</span>
  <span style="color: #ff9900">width: 0%;</span>
  <span style="color: #ff9900">background-color: #ff9900;</span>
  <span style="color: #ff9900">border-radius: 10px;</span>
  <span style="color: #ff9900">animation: progress-animation 2s ease-in-out forwards;</span>
<span style="color: #ff9900">}</span>

<span style="color: #ff9900">@keyframes progress-animation {</span>
  <span style="color: #ff9900">0% { width: 0%; }</span>
  <span style="color: #ff9900">100% { width: 100%; }</span>
<span style="color: #ff9900">}</span> 

上面的代码包括一个.progress-bar元素和一个伪元素.progress-bar::before。.progress-bar元素是最外层的容器，用来设置进度条的宽度、高度、圆角和背景色。.progress-bar::before伪元素用来显示进度条的进度，设置在.progress-bar元素内部，其宽度为0%时不可见。

动画效果是通过@keyframes关键字声明一个名为progress-animation的动画，从0%时的宽度为0%到100%时的宽度为100%。在.progress-bar::before伪元素中使用animation属性将此动画应用到它的宽度属性上。

在使用此代码时，只需要将.progress-bar元素和.progress-bar::before伪元素加到你的HTML中即可。如果你需要控制进度条的进度，只需要通过JavaScript动态修改.progress-bar::before伪元素的宽度即可。