Pure CSS3 はリアルな多層雲アニメーション特殊効果を作成します-CSSチュートリアル-php.cn

Pure CSS3 はリアルな多層雲アニメーション特殊効果を作成します

巴扎黑

リリース： 2017-05-27 17:37:57

オリジナル

2457 人が閲覧しました

簡単なチュートリアル

これは非常にクールな純粋な CSS3 リアルな多層雲アニメーション特殊効果です。この特殊効果では、複数の透明な雲 PNG 画像を背景画像として使用し、CSS アニメーションを使用して雲の水平浮遊アニメーション効果を作成します。

Pure CSS3 はリアルな多層雲アニメーション特殊効果を作成します

ソースコードを見る HTML構造

雲のアニメーションエフェクトの HTML 構造は非常に単純です。 p.sky をアンテナの背景レイヤーとして使用し、その中に複数の子

をクラウドコンテナーとして配置します。

<p class="sky">
    <p class="clouds_one"></p>
    <p class="clouds_two"></p>
    <p class="clouds_three"></p>
</p>

ログイン後にコピー

CSS スタイル

空の背景として、.sky 要素は固定の高さを設定し、相対位置を使用して使用します。オーバーフロー: 非表示;範囲外の要素を非表示にします。まず、空の色を明るい青 #007fd5 に設定します。次に、sky_background CSS3 アニメーションが空の背景に設定されます。このアニメーションは、空の背景の色を 50 秒以内に水色から濃い青に遷移します。アニメーションのアニメーションタイミング関数は、イーズアウトです。アニメーションアニメーション反復回数は無限ループです。

この特殊効果では、各要素に GPU の 3D 効果をオンにして表示パフォーマンスを向上させるために使用される、transform:translate3d(0, 0, 0) 属性が設定されています。

.sky {
    height: 480px;
    background: #007fd5;
    position: relative;
    overflow: hidden;
    -webkit-animation: sky_background 50s ease-out infinite;
    -moz-animation: sky_background 50s ease-out infinite;
    -o-animation: sky_background 50s ease-out infinite;
    animation: sky_background 50s ease-out infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5
    }
    50% {
      background: #000;
      color: #a3d9ff
    }
    100% {
      background: #007fd5;
      color: #007fd5
    }
  }

ログイン後にコピー

雲レイヤー 1 は、最初の雲 PNG 画像を背景画像として使用し、絶対位置を使用し、空のコンテナーに対して左揃えになります。高さは空と同じで、幅は空のコンテナの 3 倍です。そしてcloud_one CSS3アニメーションを実行します。このアニメーションは、雲が水平に移動するように雲レイヤーの left プロパティを変更します。

.clouds_one {
    background: url("img/cloud_one.png");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_one 50s linear infinite;
    -moz-animation: cloud_one 50s linear infinite;
    -o-animation: cloud_one 50s linear infinite;
    animation: cloud_one 50s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }

ログイン後にコピー

クラウド 2 とクラウド 3 の CSS3 アニメーションは基本的にクラウド 1 と似ていますが、アニメーションの継続時間はクラウド 1 の 50 秒であり、クラウド 1 の継続時間は 50 秒です。クラウド 2 は 75 秒、クラウド 3 の継続時間は 100 秒です。このようにして、各雲レイヤーのアニメーション時間が異なり、背景の視覚効果が得られます。

以上がPure CSS3 はリアルな多層雲アニメーション特殊効果を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。