今天突然看到阿里云官网的一个悬浮效果挺炫的，就想知道到底是怎么做的，研究了半天，加了一个技术群，原来是css3做的，然后做了一个小 Demo记录下来:
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title></title> <style> .run{width: 100px; height:100px;position:absolute;left:0;top:10px; background: url(images/run.jpg) no-repeat;} .run{ animation:runAnimation 300ms steps(5) infinite; -webkit-animation:runAnimation 300ms steps(5) infinite; -o-animation:runAnimation 300ms steps(5) infinite; -moz-animation:runAnimation 300ms steps(5) infinite; } @-webkit-keyframes runAnimation{ from{background-position: 0px 0px;} to{background-position: -500px 0px;} } @-moz-keyframes runAnimation{ from{background-position: 0px 0px;} to{background-position: -500px 0px;} } @-o-keyframes runAnimation{ from{background-position: 0px 0px;} to{background-position: -500px 0px;} } </style> </head> <body> <div class="run"></div> </body> </html>
效果就是图片中的小牛一直奔跑
1.首先，引入图片，图片是状态是帧图片（就是一帧对应一个动作），然后定位。
2.用css3的animation语法：
animation: name duration timing-function delay iteration-count direction;
name:需要绑定到选择器的 keyframe 名称
duration :完成动画所花费的时间，以秒或毫秒计。
timing-function:动画的速度曲线。
delay :规定在动画开始之前的延迟。
iteration-count:规定动画应该播放的次数。
direction:规定是否应该轮流反向播放动画。
3.通过 @keyframes 规则，创建动画:
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% (from)是动画的开始时间，100%(to) 动画的结束时间。
tips：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
看起来很炫的效果，通过css3来写就很简单了。