CSS3で流星群効果を実現するにはどうすればよいですか? (コード例)-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2021-03-18 11:21:25

転載

3774 人が閲覧しました

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

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

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

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

#難易度

##☆☆☆☆☆☆

レンダリング

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

アイデア

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

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

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

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

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

HTML

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

ログイン後にコピー

分析:

#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;
    }
}

ログイン後にコピー

分析:

#直角三角形

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

- 円形効果
- #border-radius を使用して円形の境界線を設定します。border-radius の値は次と同じにすることができます。直角三角形の高さ (高さの値は、border-top-width と border-bottom-width (値の合計) である必要があることに注意してください)
- アニメーションの開始位置と終了位置を margin-left で設定します。
- アニメーションの数は無制限に設定されています
- 知識ポイント

Triangle の CSS 実装