当前位置主页 > 资料库 > 前端教程 > CSS背景动画和多重背景动画

CSS背景动画和多重背景动画

2015-04-27

CSS背景动画是一项非常神奇的技术,使用得当的话,它可以制作出非常炫酷的效果。过去制作这种动画效果通常是使用js来实现。现在,各大浏览器对CSS3的支持已经非常广泛,我们可以直接使用CSS来制作背景动画了。

制作CSS背景动画

先来看看下面的CSS背景动画效果。这个效果可以在所有的现代浏览器中运行,更为重要的是,它是使用纯CSS3来完成的。

这个效果是通过background position属性来移动背景图片实现的。在这个效果中,我们使用CSS animations来替代CSS transitions。下面的代码中都没有使用浏览器厂商的前缀。

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}                              
                            

在使用@keyframes定义好动画效果之后,我们就可以在指定的元素上使用这个动画效果。

#animate-area { 
  width: 560px; 
  height: 400px; 
  background-image: url(bg-clouds.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;

  animation: animatedBackground 40s linear infinite;
}                              
                            

通过上面的代码,现在白云背景图片会在#animate-area元素中从左到右移动,整幅图片在40秒时间内完成移动,并且无线循环下去。

是不是非常简单呢?不必使用js也能完成这样的效果。虽然要添加各个浏览器厂商的前缀是一件很烦的事情,但是CSS代码还是非常简洁易懂的。

制作CSS多重背景动画

CSS背景动画受人们喜爱的原因是它们的代码简洁,效果优雅,且不必使用多余的元素。我们能不能制作CSS多重背景的动画效果呢?答案是肯定的!按照国际惯例,先来看看效果。

看看下面的CSS多重背景动画效果。各种背景图片同时在一个元素中进行动画。

我们可以在background-image属性中用逗号来隔开多张图片,这样能同时在渔歌元素中引入多张图片。然后用background-position属性来分别指定每张图片的位置。

.animate-area { 
  background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
  background-position: 20px -90px, 30px 80px, 0px 0px;
  background-repeat: no-repeat, no-repeat, repeat-x;
}                              
                            

这里要注意的是,你想要放在最上面的图片要写在图片列表的最前面。

移动背景图片需要修改图片的background-position属性,这里同样使用逗号来分割每张图片的位置。

@keyframes animatedBird {
  from { background-position: 20px 20px, 30px 80px, 0 0; }
  to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
    
.animate-area { 
  animation: animatedBird 4s linear infinite;
}                              
                            

到这里,多重图片背景动画的效果就做好了。三张图片元素会同时在一个元素中执行动画效果。

但是,这种这种多重背景动画的方法是有缺陷的。你不可以单独的修改某张图片的background-position,并且所有的背景图片的动画时间都是相同的。多重背景动画不能使用CSS的选择器来完成,但是这些制作方法也可以开拓你的思路,期待你能做出更好的多重背景动画效果。

Previous:
上一篇:CSS Transforms:让你的网页舞动起来
Next:
下一篇:CSS Borders:你了解CSS的边框样式吗?
返回顶部