之前已经写过进度条的原理,是以自定义渐变为核心,
这样的进度条已经很美观了,但如果能让它动起来,那就更棒了~
所以奋斗了两个晚上,作为一只前端咸鱼把看了下之前没有接触过的CSS3,用捉鸡的智商理解之后
分享一下自己的理解,欢迎讨论欢迎指错,咸鱼不胜感激。
咸鱼看的让进度条动起来的方法,是通过CSS3的animation实现的,个人认为这是最简便的方法之一。
先介绍animation
animation基本用法是:
animation: name keeping-time animate-function delay times iteration final;
第一个参数:name (animation-name):
动画的名字,即设定动画过程的名字,CSS3采用“关键帧 keyframes”来定义动画,方式形如:
@-webkit-keyframes name{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
前缀-webkit-表示webkit内核浏览器(Chrome、Safari和变心的opera),以上代码定义了一个动画,名叫name,效果是使透明度从0变化到1,0%~100%为整个过程,当然也可以定义多段如:0%~20~50%~100%。
第二个参数:keeping-time (animation-duration):
整个动画的持续时间,必须带上时间单位,s或者ms均可;
第三个参数:animate-function (animation-timing-function):
运动方式(动画方式)的贝赛尔曲线,可取值为:ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
第四个参数:delay (animation-delay):
动画延迟执行的时间,单位也是s或者ms,值得注意的是,即使延迟时间为0,也必须加上时间单位,如果写成直接写成0,在Chrome和Safari(webkit)下是没问题的,但是在FF(gecko)下无效。
第五个参数:times (animation-iteration-count):
动画循环执行的次数,无单位,infinite为无限循环。
第六个参数:iteration (animation-direction):
如果动画循环,循环的方式是:alternate(偶数次向前播放,奇数次向后播放)、normal(每次都向前播放)。
第七个参数:final (animation-fill-mode):
动画的最后(达到100%)时的状态,取值有:backward(回到初始状态)、forwards(停在最终状态)、none、both。
每个参数也可以单独写,最后用的时候记得加浏览器前缀:
.classname{
-webkit-animation:name 6s linear 0ms infinite normal forwards;
-moz-animation:name 6s linear 0ms infinite normal forwards;
-o-animation:name 6s linear 0ms infinite normal forwards;
animation:name 6s linear 0ms infinite normal forwards;
}
将不带前缀的写在最后面好处是等到animation被所有浏览器认可,可以摈弃前缀的时候可以覆盖前面的样式。
核心animation看完理解之后,加个动画就不难了。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linear-gradient</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"微软雅黑";}
.progress-bar
{
margin: 2em 0;
width: 200px;
height: 10px;
background-color:#ebebeb ;
z-index: 0;
border-radius:5px ;
}
.progress-bar span
{
height: 10px;
display: block;/*伪元素after要求其必须为块级元素*/
overflow: hidden;
z-index: 0;
}
.progress-bar.flexible span
{
background-color:#B667BD ;
}
.progress-bar span:after,.animate span
{
content: ""; /*伪属性after里必须加的,代表加的内容,这里为空*/
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:-webkit-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: -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 );
/*webkit和moz是两大网页私有属性,-moz代表firefox浏览器私有属性,-webkit代表chrome、safari私有属性*/
z-index: 1;
color: #fff;
background-size: 60px 60px; /*必须加,与后面ainimation动画move里100%时的位置相对应*/
text-shadow:0 1px 0 rgba(0,0,0,.1);
text-align: right;
-moz-animation: move 2s linear infinite; /*动画move 时间2S 线性移动 无限循环*/
-webkit-animation: move 2s linear infinite;
border-radius:10px ; /*圆形边框*/
}
.animate span:after {
display: none;
}
@-webkit-keyframes move
{
0%
{
background-position:0px 0px ;
}
100%
{
background-position: 50px 50px;
}
}
@-moz-keyframes move
{
0%
{
background-position:0 0 ;
}
100%
{
background-position: 60px 60px;
}
}
</style>
</head>
<body>
<div class="progress-bar flexible animate"><span style="width: 75%;"></span> </div>
</body>
</html>
animation详细解释原帖
http://www.tangbc.com/blog/#frontends/215
以上。