CSS3实现彩色进度条动画的示例


Posted in HTML / CSS onOctober 29, 2020

简要教程

CSS3实现彩色进度条动画的示例

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

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实现彩色进度条动画的示例的详细内容,更多关于CSS3 彩色进度条的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
CSS3实现指纹特效代码
Mar 17 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 #HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 #HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 #HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 #HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 #HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 #HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 #HTML / CSS
You might like
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
Element Input组件分析小结
2018/10/11 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
建筑自我鉴定
2013/10/19 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
精神文明建设标语
2014/06/16 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
群众路线专项整治方案
2014/10/27 职场文书
社区综治工作汇报
2014/10/27 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书