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和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
HTML基础详解(下)
Oct 16 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+DBM的同学录程序(4)
2006/10/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
竞选班长演讲稿
2013/12/30 职场文书
先进个人获奖感言
2014/01/24 职场文书
留学经费担保书
2014/05/12 职场文书
诚信考试标语
2014/06/24 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2016年会开场白台词
2015/06/01 职场文书
公司业务员管理制度
2015/08/05 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
python编写五子棋游戏
2021/05/25 Python
python for循环赋值问题
2021/06/03 Python
JavaScript 数组去重详解
2021/09/15 Javascript
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers