CSS3动画进度条
CSS3动画进度条
CSS CODE:
@-webkit-keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: 30px 30px;
}
}
@-moz-keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: 30px 30px;
}
}
@-ms-keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: 30px 30px;
}
}
@keyframes move{
0%{
background-position: 0 0;
}
100%{
background-position: 30px 30px;
}
}
.progress{
width: 300px;
height: 25px;
background-color:rgba(1,190,1,1) ;
box-shadow: 0px 2px 0px rgba(255,255,255,0.5) inset;
border-radius: 5px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
-webkit-animation:move 1s linear infinite;
-moz-animation:move 1s linear infinite;
-ms-animation:move 1s linear infinite;
-o-animation:move 1s linear infinite;
animation:move 1s linear infinite;
}
HTML CODE:
<div class="progress"></div>
这里两个关键:
background-size background-image
中间白色条的大小可以通过background-size控制,颜色通过background-image rgba控制
CSS3动画进度条的更多相关文章
- 类似 Dribbble 下载按钮的 SVG 弹性动画进度条
Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...
- 纯CSS3制作进度条源代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Javascript 及 CSS3 实现进度条效果
Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...
- JS框架_(Progress.js)圆形动画进度条
百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...
- iOS之小功能模块--彩虹动画进度条学习和自主封装改进
前言: 首先展示一下这个iOS小示例的彩色进度条动画效果: 阅读本文先说说好处:对于基础不好的读者,可以直接阅读文末尾的"如何使用彩虹动画进度条"章节,然后将我封装好的这个功能模块 ...
- css3实现进度条的模拟
两种进度条动画的实现: 1.css3,但IE9-不支持. 2.js动画,兼容性好,但没有css3实现的顺畅 Demo: <html> <head> < ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
- css3条纹进度条
新建div,取名progress,如下 <div class="progress"></div> 在里面插入条纹进度条,以及进度显示文本进度: <di ...
- 学习 | css3实现进度条加载
进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel=& ...
随机推荐
- [MFC] 如何更改MFC程序图标
方法一: >_<:找一张ICO图标,替换programname/res/programname.ico文件,就可以啦,这时候你运行后得到的图标可能还是原来MFC的默认图标,这时候你只要把工 ...
- DDD基本概念
一条箴言是:如果值对象是可共享的,那么它们应该是不可变的.值对象应该保持很小.很简单 极力推荐将值对象实现为不可变的.它们由一个构造器创建,并且在它们的生命周期内永远不会被修改.当你想要得到这个对象的 ...
- Linux系列笔记 - vim相关记录
一.常用到的vim命令 这里只简单记录常用到的命令,后面会有自己记录的命令,但有些可能不常用. 常规模式: gg 跳到文件头 shift+g 跳到文件尾 行数+gg 跳到指定行 如:123gg 跳到1 ...
- 秀才提笔忘了字:javascript使用requestAnimationFrame实现动画
requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的 ...
- Swift开发iOS应用过程中的问题和解决记录
虚拟机里安装OSX+XCode开发环境 用真机的请直接跳过这个部分. 主要是在VitrualBox里安装mac系统和xcode,参考这篇教程,VirtualBox的版本是4.3.18 r96156,O ...
- 使用Excel制作万年历(可打印)
先来看看A4纸打印效果,其他功能后续继续完善中. 年份数据字典(农历节日) 农历节日表 年度 春节 元宵节 龙抬头 端午节 六月六 七月七 七月十五 仲秋节 除夕 2010年02月14日 2010年0 ...
- Activiti 删除key值相同的所有不同版本的流程定义
package com.mycom.processDefinition; import java.io.File; import java.io.IOException; import java.io ...
- aehyok.com的成长之路三——框架结构
前言 首先奉上个人网站地址传送门:aehyok.com. aehyok.com的成长之路一——开篇 中主要阐述了自己为什么建立自己的网站,以及个人网站的大致方向. aehyok.com的成长之路二—— ...
- 21个高质量的Swift开源iOS App
原文:21 Amazing Open Source iOS Apps Written in Swift 对Swift初学者来说,学习开源项目,阅读源码是个不错的方法.在这篇文章中,基于对代码质量和排名 ...
- Python LDAP中的时间戳转换为Linux下时间
(Get-ADUser zhangsan -Properties badpasswordtime).badpasswordtime返回值为:131172610187388712131172610187 ...