CSS3如何实现彩色进度条动画

这篇文章给大家分享的是有关CSS3如何实现彩色进度条动画的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

简要教程

这是一款css3彩色进度条动画特效。该CSS3进度条动画特效中包含了三种动画特效，它们通过HMTL代码和简单的CSS3来实现彩色进度条的不同动画效果。

使用方法

HTML结构

<div class="container">      <div class="progress progress-striped">    <div class="progress-bar">    </div>                         </div> </div><div class="container">      <div class="progress2 progress-moved">    <div class="progress-bar2" >    </div>                         </div> </div><div class="container">      <div class="progress progress-infinite">    <div class="progress-bar3" >    </div>                         </div> </div>

CSS结构

body {  font-family: 'Montserrat', sans-serif;  background: #2c303a;}.container {  margin: 100px auto;  width: 500px;  text-align: center;}.progress {  padding: 6px;  background: rgba(0, 0, 0, 0.25);  border-radius: 6px;  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);}.progress-bar {  height: 18px;  background-color: #ee303c;  border-radius: 4px;  transition: 0.4s linear;  transition-property: width, background-color;}.progress-striped .progress-bar {  background-color: #FCBC51;  width: 100%;  background-image: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 50%, #fca311 50%, #fca311 75%, transparent 75%, transparent);  animation: progressAnimationStrike 6s;}@keyframes progressAnimationStrike {  from {    width: 0;  }  to {    width: 100%;  }}.progress2 {  padding: 6px;  border-radius: 30px;  background: rgba(0, 0, 0, 0.25);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);}.progress-bar2 {  height: 18px;  border-radius: 30px;  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));  transition: 0.4s linear;  transition-property: width, background-color;}.progress-moved .progress-bar2 {  width: 85%;  background-color: #EF476F;  animation: progressAnimation 6s;}@keyframes progressAnimation {  0% {    width: 5%;    background-color: #F9BCCA;  }  100% {    width: 85%;    background-color: #EF476F;  }}.progress-bar3 {  height: 18px;  border-radius: 4px;  background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);  transition: 0.4s linear;  transition-property: width, background-color;}.progress-infinite .progress-bar3 {  width: 100%;  background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);  animation: colorAnimation 1s infinite;}@keyframes colorAnimation {  0% {    background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);  }  20% {    background-image: linear-gradient(to right, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964);  }  40% {    background-image: linear-gradient(to right, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa);  }  60% {    background-image: linear-gradient(to right, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff);  }  100% {    background-image: linear-gradient(to right, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8);  }}

感谢各位的阅读！关于“CSS3如何实现彩色进度条动画”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！