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 24 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 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面向对象编程快速入门
2006/10/09 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
简单实现python聊天程序
2018/04/01 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
新闻专业个人求职信
2013/12/19 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
单位消防安全责任书
2014/07/23 职场文书
入伍通知书
2015/04/23 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
文书工作总结(范文)
2019/07/11 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL