其他代码

CSS3彩色进度条动画特效

面包多

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

HTML 结构

  1. <div class="container">    
  2.   <div class="progress progress-striped">
  3.     <div class="progress-bar">
  4.     </div>                       
  5.   </div> 
  6. </div>
  7.  
  8. <div class="container">    
  9.   <div class="progress2 progress-moved">
  10.     <div class="progress-bar2" >
  11.     </div>                       
  12.   </div> 
  13. </div>
  14.  
  15. <div class="container">    
  16.   <div class="progress progress-infinite">
  17.     <div class="progress-bar3" >
  18.     </div>                       
  19.   </div> 
  20. </div>
也想出现在这里?联系我们
创客主机

css 样式

  1. body {
  2.   font-family: 'Montserrat', sans-serif;
  3.   background: #2c303a;
  4. }
  5.  
  6. .container {
  7.   margin: 100px auto;
  8.   width: 500px;
  9.   text-align: center;
  10. }
  11.  
  12. .progress {
  13.   padding: 6px;
  14.   background: rgba(0, 0, 0, 0.25);
  15.   border-radius: 6px;
  16.   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  17. }
  18.  
  19. .progress-bar {
  20.   height: 18px;
  21.   background-color: #ee303c;
  22.   border-radius: 4px;
  23.   transition: 0.4s linear;
  24.   transition-property: width, background-color;
  25. }
  26.  
  27. .progress-striped .progress-bar {
  28.   background-color: #FCBC51;
  29.   width: 100%;
  30.   background-image: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 50%, #fca311 50%, #fca311 75%, transparent 75%, transparent);
  31.   animation: progressAnimationStrike 6s;
  32. }
  33.  
  34. @keyframes progressAnimationStrike {
  35.   from {
  36.     width: 0;
  37.   }
  38.   to {
  39.     width: 100%;
  40.   }
  41. }
  42. .progress2 {
  43.   padding: 6px;
  44.   border-radius: 30px;
  45.   background: rgba(0, 0, 0, 0.25);
  46.   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  47. }
  48.  
  49. .progress-bar2 {
  50.   height: 18px;
  51.   border-radius: 30px;
  52.   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  53.   transition: 0.4s linear;
  54.   transition-property: width, background-color;
  55. }
  56.  
  57. .progress-moved .progress-bar2 {
  58.   width: 85%;
  59.   background-color: #EF476F;
  60.   animation: progressAnimation 6s;
  61. }
  62.  
  63. @keyframes progressAnimation {
  64.   0% {
  65.     width: 5%;
  66.     background-color: #F9BCCA;
  67.   }
  68.   100% {
  69.     width: 85%;
  70.     background-color: #EF476F;
  71.   }
  72. }
  73. .progress-bar3 {
  74.   height: 18px;
  75.   border-radius: 4px;
  76.   background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  77.   transition: 0.4s linear;
  78.   transition-property: width, background-color;
  79. }
  80.  
  81. .progress-infinite .progress-bar3 {
  82.   width: 100%;
  83.   background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  84.   animation: colorAnimation 1s infinite;
  85. }
  86.  
  87. @keyframes colorAnimation {
  88.   0% {
  89.     background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
  90.   }
  91.   20% {
  92.     background-image: linear-gradient(to right, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964);
  93.   }
  94.   40% {
  95.     background-image: linear-gradient(to right, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa);
  96.   }
  97.   60% {
  98.     background-image: linear-gradient(to right, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff);
  99.   }
  100.   100% {
  101.     background-image: linear-gradient(to right, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8);
  102.   }
  103. }

Codepen 网址:https://codepen.io/evawythien/pen/jegRxN

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!