题
我想使用这段代码,但我希望动画垂直。
header {
width: 100%;
height: 150px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
background-position: 0px;
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
@-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
@-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
@-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
@keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
我在这里找到了这段代码: http://jsfiddle.net/e3WLD/3/
感谢帮助
解决方案
背景位置接受2参数:
- 水平定位的第一个
- 和第二个用于垂直定位
我编辑了你的 jsfiddle
到这个:
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px;
background-repeat: repeat-y;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
@-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
@-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
@-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 1000px; } /* set this to the width of the image */
}
@keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
. 其他提示
您只是设置和动画背景位置值,因此它假定它将引用到第一个(x-position)和其他默认值为auto(我认为)。
试试这个
css
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px; /* note */
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
@-webkit-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 1000px; }
}
@-moz-keyframes myanim
{ 0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
@-o-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
@keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
. 如果你想将其设置为垂直旋转,如下所示: http://jsfiddle.net/jme11/AYKC2/
然后你需要将重复设置为 repeat-y
并更改背景位置以匹配元素的高度:
@keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 131px; } /* set this to the height of the image */
}
不隶属于 StackOverflow