1

背景画像を使ってサトル効果を作ろうとしています。私はそれを非常にゆっくりと左に動かし、画像全体が表示されたら停止しようとしています。

現時点では、画像はまったく動きません。

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
width:100%;
height:100px;
top:0;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/0/0c/Yercaud_scenery.jpg');
position:relative;
-webkit-animation:mymove 4s infinite; /* Safari and Chrome */
}


@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;left:-70px;}
25%  {top:0px;left:-50px;}
75%  {top:0px;left:30px;}
100% {top:0px;left:31px}
}

</style>
</head>
<body>

<p>here is some sample text</p>



</body>
</html>

どんな助けでも大歓迎です。CSS のみを使用することに縛られているわけではありませんが、可能であれば使用したいと考えています。

4

1 に答える 1

2

CSS を介してキーフレームを使用する代わりに、より軽量でシンプルなものが必要でした。数行のjqueryとcssを使用することで解決策を見つけたようです。

Javascript:

<script>
$(function(){
$("body").animate({backgroundPositionX : "-450"}, 25000);
});
</script>

CSS:

<style type="text/css">
  body {
    background-image: url('../imgs/bg-image.jpg');
    background-repeat:repeat-x;
    }
</style>
于 2012-11-17T19:40:05.890 に答える