Pure CSS と Flutter はそれぞれブリージングライト効果を実現します (サンプルコード)

前回、非常に熱心なファンから、月を呼吸する光の効果にできるかどうか尋ねられました。月の大きさの写真が見つからなかったので、代わりに星を使用しました。今日、このブロガーは純粋なCSSとFlutterアニメーションを使用してそれぞれ実装しました。収集して学ぶことを忘れないでください
効果：

ここに画像の説明を挿入

テストしたい方は、元の写真は記事の最後にあります

実施原則：
2枚の絵を用意し、交互に表示します。

純粋な CSS 実装、コードは次のようになります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        。包む{
            幅: 300ピクセル;
            高さ: 300px;
            位置: 相対的;
            マージン: 0 自動;
            オーバーフロー: 非表示;
        }
        .img1,
        .img2{
            上マージン: 100px;
            幅: 100ピクセル;
            位置: 絶対;
        }
        .img2{
            -webkit-animation: 呼吸 3 秒 無限 easy-in-out 交互;
            アニメーション: 呼吸 3 秒、無限のイーズイン アウト、交互;
        }
        @-webkit-keyframes 息 {
            0% {不透明度: .2;}60% {不透明度: 1;}から {不透明度: .2;}
        }
        @keyframes 息 {
            0% {不透明度: .2;}60% {不透明度: 1;}から {不透明度: .2;}
        }
    </スタイル>
</head>
<本文>
<div class="wrap">
    <img src="images/star1.jpg" alt="ベースマップ" class="img1">
    <img src="images/star2.jpg" alt="上" class="img2">
</div>

</本文>
</html>

ここに画像の説明を挿入

純粋な CSS と Flutter でブリージングライト効果を実現する方法についての記事はこれで終わりです (サンプルコード)。CSS でブリージングライトを実現する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript でシンプルなクリスマスゲームを実装する

>>: Linuxコマンドunzipの詳しい説明