查看: 1272|回复: 0

[CSS3动画] 3种css3彩色进度条动画开发源码

[复制链接]
发表于 2019-9-21 10:28:15 | 显示全部楼层 |阅读模式
简要教程


3种css3彩色进度条动画开发源码

3种css3彩色进度条动画开发源码


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

cc.gif

使用方法

HTML结构

  1. <div class="container">   
  2.   <div class="progress progress-striped">
  3.     <div class="progress-bar">
  4.     </div>                       
  5.   </div>
  6. </div>

  7. <div class="container">   
  8.   <div class="progress2 progress-moved">
  9.     <div class="progress-bar2" >
  10.     </div>                       
  11.   </div>
  12. </div>

  13. <div class="container">   
  14.   <div class="progress progress-infinite">
  15.     <div class="progress-bar3" >
  16.     </div>                       
  17.   </div>
  18. </div>
复制代码

css结构

  1. body {
  2.   font-family: 'Montserrat', sans-serif;
  3.   background: #2c303a;
  4. }

  5. .container {
  6.   margin: 100px auto;
  7.   width: 500px;
  8.   text-align: center;
  9. }

  10. .progress {
  11.   padding: 6px;
  12.   background: rgba(0, 0, 0, 0.25);
  13.   border-radius: 6px;
  14.   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  15. }

  16. .progress-bar {
  17.   height: 18px;
  18.   background-color: #ee303c;
  19.   border-radius: 4px;
  20.   transition: 0.4s linear;
  21.   transition-property: width, background-color;
  22. }

  23. .progress-striped .progress-bar {
  24.   background-color: #FCBC51;
  25.   width: 100%;
  26.   background-image: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 50%, #fca311 50%, #fca311 75%, transparent 75%, transparent);
  27.   animation: progressAnimationStrike 6s;
  28. }

  29. @keyframes progressAnimationStrike {
  30.   from {
  31.     width: 0;
  32.   }
  33.   to {
  34.     width: 100%;
  35.   }
  36. }
  37. .progress2 {
  38.   padding: 6px;
  39.   border-radius: 30px;
  40.   background: rgba(0, 0, 0, 0.25);
  41.   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  42. }

  43. .progress-bar2 {
  44.   height: 18px;
  45.   border-radius: 30px;
  46.   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  47.   transition: 0.4s linear;
  48.   transition-property: width, background-color;
  49. }

  50. .progress-moved .progress-bar2 {
  51.   width: 85%;
  52.   background-color: #EF476F;
  53.   animation: progressAnimation 6s;
  54. }

  55. @keyframes progressAnimation {
  56.   0% {
  57.     width: 5%;
  58.     background-color: #F9BCCA;
  59.   }
  60.   100% {
  61.     width: 85%;
  62.     background-color: #EF476F;
  63.   }
  64. }
  65. .progress-bar3 {
  66.   height: 18px;
  67.   border-radius: 4px;
  68.   background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  69.   transition: 0.4s linear;
  70.   transition-property: width, background-color;
  71. }

  72. .progress-infinite .progress-bar3 {
  73.   width: 100%;
  74.   background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  75.   animation: colorAnimation 1s infinite;
  76. }

  77. @keyframes colorAnimation {
  78.   0% {
  79.     background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  80.   }
  81.   20% {
  82.     background-image: linear-gradient(to right, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964);
  83.   }
  84.   40% {
  85.     background-image: linear-gradient(to right, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa);
  86.   }
  87.   60% {
  88.     background-image: linear-gradient(to right, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff);
  89.   }
  90.   100% {
  91.     background-image: linear-gradient(to right, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8);
  92.   }
  93. }
复制代码

源码下载:

游客,如果您要下载源码或者查看隐藏内容请回复


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表