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高级选择器使用方法
Dec 02 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 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 替换模板变量实现步骤
2009/08/24 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
session 加入redis的实现代码
2016/07/15 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
基于Python实现文件大小输出
2016/01/11 Python
python中import学习备忘笔记
2017/01/24 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python使用RNN实现文本分类
2018/05/24 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
python 读取、写入txt文件的示例
2020/09/27 Python
python设置中文界面实例方法
2020/10/27 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
工厂厂长的职责
2013/12/12 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
2014年文员工作总结
2014/11/18 职场文书
圣诞节开幕词
2015/01/29 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python