0

何かに少し固執して、私は底に水があるサイトを持っていて、それが左から右に絶えず移動するようにしたかったので、水がシームレスに流れるような錯覚を与えました。ホバー状態で水平のみ。

http://www.priteshgupta.com/2011/07/filling-a-glass-with-water-using-html5/

私が持っているhtmlは単純な空のdivタグです（すべてがcssにあります）

<div id="water"></div>

CSSは次のとおりです。

#water {
  background: url(img/ocean.png);   
  margin-top: 1000px;
  width: 100%;
  height: 400px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  z-index: 3;
  animation: water 2s linear infinite;
}

@keyframes water {
  to {transform: translate(100px,0);}
  from {transform: translate(0px,0);}
}

画像は次のようになります: http://prntscr.com/1hwfnz

これを行うための最良の方法に関するアイデアはありますか? どんな助けでも大歓迎です。ありがとう

補足として、私はこのcssを試しました：

#water {
  background: url(img/ocean.png);   
  margin-top: 1000px;
  width: 200%;
  height: 400px;
  margin-left:-100px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  z-index: 3;
  animation: water 2s linear infinite;
}

@keyframes water {
to {transform: translate(100px,0);}
from {transform: translate(0px,0);}
}

x を非表示にするオーバーフローを設定できます。これにより、スクロールの問題に対処し、水が流れるようにする必要があります。問題は、水循環が終了すると、醜いジャンプが最初にカットバックされることです。

4

1 に答える 1

1

のみにトランジションを適用するとwater、アニメーションが実際に何をするかを正確に確認できます-画像全体を100px右に移動し、元の位置に戻ってからもう一度実行します

あなたが持つ必要があるのは次のようなものです

#water {
  background: url(http://i.imgur.com/Lrvw1oc.png);   
  /*margin-top: 1000px;*/
  width: 100%;
  height: 200px;
  -webkit-transition: water 3s ease-out;
  -moz-transition: water 3s ease-out;
  -o-transition: water 3s ease-out;
  transition: water 3s ease-out;
  z-index: 3;
  animation: water 2000s linear infinite;
}

@keyframes water {  
  0% {background-position: 0 0;}
  100% {background-position: 100000% 0;}
}

画像全体ではなく、背景の位置を移動します。

ここにデモがあります

注: 2000 年代と 100,000% は、「醜いジャンプ カット」が発生しないようにするための回避策です。私の実装が少し間違っている可能性があります

于 2013-07-28T01:32:29.400 に答える