在上一个模仿微信打飞机的游戏中,在敌机掉落下来时,如果背景图片也可以一直无穷滚动的话,那么效果就会更好。
现在就是要利用CSS3来实现一张图片的无穷滚动。
首先了解一下CSS3的动画属性:
①.animation-name:
用于将动画(@keyframes 语法)附加到元素上;
②. animation-duration:
定义动画完成一次迭代(从0%到100%)所花的时间;
③. animation-timing-function:
类似于transition-timing-function属性,
用来更细粒度的控制动画的速度。
取值有: ease\ linear\ ease-in\ ease-out\ ease-in-out 之一
④.animation-iteration-count:
此属性用来定义动画要执行多少次。infinite无限次
⑤. animation-direction:
当动画迭代时,可以使用具有alternate的 animation- direction属性来使其他迭代反向播放动画。 默认normal;
⑥. animation-delay:
在开始执行动画时的延迟
⑦. animation-fill-mode:
取值有:none、forwards、backwards、both
定义在动画开始之前或者结束之后发生的动作
⑧. animation-play-state:
定义动画运行还是暂停
当上面的太复杂时,还可以简写animation属性:
-供应商前缀-animation: ‘自定义动画名’ 30ms ease-in 1 alternate 5s backwords;
再对照上面的属性来看一下。这些顺序不可以颠倒
下来就是实战了。定义一个背景图片,使其无限滚动
#background{
position: absolute;
width: 300px;
height: 500px