0

こんにちは、仲間の開発者と教育の開発者です。

今日、このウェブサイトのヘッダーでこのクールな効果を見ました https://www.premiumsmoking.com/nl/e-sigaret/megatwix.html

ループし続ける煙のエフェクトがとてもかっこいいと思ったのでリメイクしてみました。

私はcssアニメーションを使用してこれをやろうとしましたが、私が見つけた問題は、背景のあるdivが80％のようになったときに、divに残っている黒いスペースが見え始めることでした.

ノーエンディングのシクルみたいにしたいです。(多分fadeinの何か？)

これは私が今持っているコードです

.element {
    width:3000px;
    height:1000px;
    background-image:url(moveimage1.png);
    position:relative;
    margin:10px;
    z-index: -1;

animation:myfirst 200s infinite;
}
@keyframes myfirst
   {
0%   {opacity: 0.25; margin-left:  -1500px; }
50%  {opacity: 1;}
100% {opacity: 0.25; margin-left: 1000px; }
}

誰かがこの「問題」で私を助けてくれることを本当に願っています

（この投稿で何か間違ったことをしている場合は、申し訳ありませんが、初めてスタックオーバーフローについて質問します）

私の質問を読んでくれてありがとう。

- 編集 -

これも使用したいすべての人にとって、これは私の最終的なコードです:

.element {
    width:100%;
    height:1000px;
    background-image:url(moveimage1.png);
    background-size: 3000px 1000px;
    float: left;
    position:relative;
    z-index: -1;

animation:myfirst 10s infinite linear;
}
@keyframes myfirst
   {
0%   {opacity: 0.25; background-position:  0; }
50%  {opacity: 1;}
100% {opacity: 0.25; background-position: 3000px; }
}

ロキに感謝

4

1 に答える 1

0

ブロック内の背景ではなく、ブロックを移動しようとしています。background-positionではなく、プロパティをアニメーション化することをお勧めしますmargin-left。背景画像が繰り返される限り、もう黒いスペースはありません

于 2013-07-19T00:04:51.997 に答える