CSS3で流星群効果を実現するにはどうすればよいですか? (コード例)

この記事では、CSS3 を使用して流星群の効果を実現する方法をコード例を通して紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

[推奨チュートリアル: CSS ビデオ チュートリアル]

注: 本文では実装についてのみ説明しています。 1 つの流星群メソッドの場合、複数のエフェクトは 1 つのアニメーションの開始点と幅をわずかに変更するだけで済みます。具体的な例については、記事の最後にある github アドレスを参照してください。

#難易度

##☆☆☆☆☆☆

レンダリング

アイデア

流星群の実装は 3 つの部分に分かれています:

(1) border 属性を使用して直角三角形を実装します。三角形の実装については、

CSSで三角形を描画する方法を参照してください。

(2)直角三角形に円形のエフェクトを追加し、直角形状のエッジを弱めます

(3) アニメーション効果を追加して、右三角形が動きます

HTML

<span class="shooting-star animation"></span>

分析:

html アニメーションを追加するだけですコンテナ

#CSS

#

.shooting-star {
    margin: 30px;
    display: block;
    width: 0;
    border-radius: 2px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: transparent;
    border-left-width: 230px;
    border-left-style: solid;
    border-left-color: white;
    border-right-width: 230px;
    border-right-style: solid;
    border-right-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
.animation {
    animation: fly 3s infinite;
}
@keyframes fly {
    from {
        margin-left: 900px;
        border-left-width: 130px;
        border-right-width: 130px;
    }
    to {
        margin-left: -900px;
        border-left-width: 360px;
        border-right-width: 360px;
    }
}

分析:

#直角三角形

正しいことを実現するには-三角三角形の場合は、まず直角の向きを決めます。この例では、直角の向きは左下隅なので、左と下の境界線を色付き、右と上の境界線を透明に設定します。

##流星は線の形に似ているため、直角三角形は高さが小さく、幅が大きくなります。したがって、ここで設定する左右のボーダー幅の値は非常に大きく、上下のボーダー幅の値は非常に小さくなります。
• span と同様に、表示デフォルト属性値が である要素は、ブロックではない場合は、表示属性をブロックに設定する必要があります
  • 円形効果
  • #border-radius を使用して円形の境界線を設定します。border-radius の値は次と同じにすることができます。直角三角形の高さ (高さの値は、border-top-width と border-bottom-width (値の合計) である必要があることに注意してください)
• アニメーション効果
  • アニメーションの開始位置と終了位置を margin-left で設定します。
border-*-width を変更することで、値によって流星の長さを変更する効果が得られます。
• アニメーションの継続時間は、アニメーションの継続時間を決定します。インターフェースを通過する流星
  • アニメーションの数は無制限に設定されています
  • 知識ポイント

Triangle の CSS 実装

• 角丸ボーダー
• animation アニメーション効果の追加
• @keyframes カスタム アニメーション
• ##Gitbub ソース コード:

https://github.com/nanzhangren/CSS_skills/blob /master/shooting_star/shooting_star.html

プログラミング関連の知識については、

プログラミング入門

をご覧ください。 ！

以上がCSS3で流星群効果を実現するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。