文章目录

在某个项目中遇到需要背景滚动的效果,类似于zaker一样,背景图标左右缓慢滚动。实际上实现起来很简单,只需要一个css3 动画即可

首先设置背景

设置背景
1
2
3
4
5
6
7
8
9
10
11
body{
margin:0;
padding:0;
background: url("images/bg.png") no-repeat;
background-size: 300% 100%;
background-position: 0 0;
-webkit-animation-duration:3s;
-webkit-animation-name:scrollbg;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite
}

-webkit-animation-duration:动画持续时间 不填没有动画效果哦!
-webkit-animation-name:指定下面的动画名称
-webkit-animation-direction:“alternate”属性动画实现反复轮播,左边滚动到有边后,会从右边又滚动回来,达到平滑的效果。
-webkit-animation-iteration-count:动画重复次数。 “infinite”无限次

这里把背景设置成的300%的宽度就是图片大小是3倍于界面宽度,不断改变position来实现背景滚动
接下来是动画代码

动画帧
1
2
3
4
5
6
7
8
@-webkit-keyframes scrollbg {
from{
background-position: 0 0;
}
to{
background-position: -300% 0;
}
}

keyframes是css3的动画帧,除了from,to还可以填写百分比,比如 10%{//dosomthing} 20%{//dosomething}
为了兼容keyframes,实际使用中建议加写几分,使用无前缀和其他前缀,比如-moz-keyframes来兼容火狐等其他浏览器

此文是本站原创,转载请标注作者和链接出处!