CSS背景图移动

发布时间:2017-02-09 浏览次数:7544 文章来源:个人博客

在开发时候,需要实现将一张星空图作为背景,并且移动,让用户拥有背景在动的感觉。。


实现思路就是找一张大图,不进行缩放,原样作为背景,肯定有超出部分,移动背景图位置,从而实现背景移动。


实现的代码如下:

//设置背景图
background: url("../img/body_bg5.jpg"); 
//设置图片位置
background-position: 0px 0px;
//让背景图在x方向上重复,保证不会因为图片过小显示不全
background-repeat: repeat-x;
//动画方法,不停的移动图片
animation:animatedBackground 40s linear infinite;


基本的有了,现在开始动画的操作:

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

这样,背景图就从0到100%位置循环移动。

key-word
CSS 背景图移动 背景图平移 CSS背景图