ティックアニメーション効果を作成するための svg+css または js

以前、上司からログイン後にチェックマークを表示できるプログラムを作るように言われたのですが、Baiduでは見つけられませんでした。今日、Bilibiliで実際に要件に基づいて改良を加えた動画を見ました。さっそく、その効果を見てみましょう！

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>チェックボックスアニメーション</title>
</head>
<本文>
<div id="d1">
    <input type="checkbox" style="display: none" id="love1" />
    <label for="love1" id="btn1" >完了</label>
<svg 幅="200px" 高さ="200px">
    <circle r="90" class="circle" fill="none"stroke="#2de540"stroke-width="10" cx="100" cy="100"stroke-linecap="round" transform="rotate(-90 100 100) " ></circle>
    <ポリライン fill="none" ストローク="#2de540" ストローク幅="10" ポイント="44,107 86,137 152,69" ストロークラインキャップ="round" ストロークラインジョイン="round" クラス="tick" ></ポリライン>
</svg>
<h2 style="text-align: center;width: 200px">成功</h2>

</div>
</本文>
<!--ここで地元の jq を紹介してください-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</html>

CSSコード

h2 {
        フォントファミリー: Helvetica;
        フォントサイズ: 30px;
        上マージン: 20px;
        色: #333;
        不透明度: 0;
    }
    input[type="checkbox"]:checked+ ラベル ~ h2 {
        アニメーション: .6 秒のタイトルのイーズインアウト;
        アニメーション遅延: 1.2秒;
        アニメーション塗りつぶしモード: forwards;
    }
    。丸 {
        ストロークダッシュ配列: 1194;
        ストロークダッシュオフセット: 1194;
    }
    input[type="checkbox"]:checked + ラベル + svg .circle {
        アニメーション: 1 秒間の円のイーズインアウト;
        アニメーション塗りつぶしモード: forwards;
    }
    .ティック{
        ストロークダッシュ配列: 350;
        ストロークダッシュオフセット: 350;
    }
    input[type="checkbox"]:checked + label+ svg .tick {
        アニメーション: tick .8s イーズアウト;
        アニメーション塗りつぶしモード: forwards;
        アニメーション遅延: .95秒;
    }
    @keyframes 円 {
        から {
            ストロークダッシュオフセット: 1194;
        }
        に {
            ストロークダッシュオフセット: 2388;
        }
    }
    @keyframes ティック {
        から {
            ストロークダッシュオフセット: 350;
        }
        に {
            ストロークダッシュオフセット: 0;
        }
    }
    @キーフレームタイトル{
        から {
            不透明度: 0;
        }
        に {
            不透明度: 1;
        }
    }
    ラベル {
        表示: インラインブロック;
        高さ: 38px;
        幅: 38px;
        行の高さ: 38px;
        パディング: 0 18px;
        背景色: #1E9FFF;
        色: #fff;
        空白: ラップなし;
        テキスト配置: 中央;
        フォントサイズ: 14px;
        境界線: なし;
        境界線の半径: 2px;
        カーソル: ポインタ;
    }
    #d1 {
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        最小高さ: 100px;
        flex-direction: 列;
    }

ここで終わるべきだったのですが、実際に機能を実装すると、アニメーション効果の表示を切り替えるためにチェックボックスを使用することはほとんどありません。一般的に、アニメーション効果を操作するには、やはりボタンが必要です。以下はjq操作のコードです。実際にはjqの.animate()を使用する方が良いのですが、初心者なので怠けて（ps：まあ、やり方がわからないのですが）、直接.css()を使用しました。

JavaScript コード

  $("#btn1").on("クリック",関数() {
       if($(this).text()==="完了"){
           $(".circle").css({'animation':'circle 1s easy-in-out','animation-fill-mode':'forwards'});
           $(".tick").css({'animation':'tick .8s easy-out','animation-fill-mode':'forwards','animation-delay':'.95s'});
           $("h2").css({'アニメーション':'.6s タイトルのイーズインアウト','アニメーションフィルモード':'フォワード','アニメーションディレイ':'1.2s'})
           $(this).text("キャンセル")
       }それ以外{
           $(".circle").css({'アニメーション':'なし','アニメーションの塗りつぶしモード':'なし'});
           $(".tick").css({'アニメーション':'なし','アニメーションの塗りつぶしモード':'なし'});
           $("h2").css({'アニメーション':'なし','アニメーションの塗りつぶしモード':'なし'})
           $(this).text("完了")
       }
   });

svg+css または js を使用してチェックマークアニメーション効果を作成する方法についての記事はこれで終わりです。より関連性の高い svg css チェックマークアニメーションコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: ウェブサイトのカラースキームウェブサイトに適した色の選択

>>: Docker Compose を使用して ELK を迅速にデプロイする (テスト済みで効果的)