Tik Tok サブスクリプション ボタンのアニメーション効果を実現する CSS

Tik Tok サブスクリプション ボタンのアニメーション効果を実現する CSS

少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、最近フロントエンドの知識を勉強しているところです。そこで自分でどう実装するかを考えてみたところ、最終的な効果は良かったものの、自分がやったことは十分ではないと感じました。参考用です。

🍻 最終効果

最終結果

💡 アイデア

  • jQueryのtoggleClass()メソッドを使用して、 activeクラスを追加および削除します。
  • 元の要素とactive要素のスタイルをそれぞれ設定し、CSS transition属性を使用して変更時間や速度などを定義します。
  • CSS animationを使用して、 active要素の変更アニメーションを設定します。

👨‍💻実装

html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="スタイルシート" href="style.css">
    <title>ドキュメント</title>
</head>
<本文>
	<!-- 簡潔にするために、div が使用されます。実際には、ボタンを使用することもできますが、見栄えを良くするためにスタイルを設定する必要があります^_^-->
	<!-- まだ <svg> を学習していないので、<svg> を使用するとより良い結果が得られるかもしれません -->
    <div id="followBtn">
        <div id="line1"></div>
        <div id="line2"></div>
    </div>
    <script src="index.js"></script>
</本文>
</html>

JS

$(function () { // jQuery エントリ関数 $('#followBtn').click(function (e) { // クリック イベントをバインド $('#followBtn').toggleClass('active');
        $('#line1').toggleClass('アクティブ');
        $('#line2').toggleClass('アクティブ');
    });
})

CS

体 {
    幅: 1024ピクセル;
    margin: 0 auto; /* 中央 */
}

#フォローボタン{
    位置: 相対的;
    表示: ブロック;
    幅: 100ピクセル;
    高さ: 100px;
    マージン: 100px 自動;
    border-radius: 100px; // div を円形にします background-color: #ccc;
    transition: all linear .5s; // スタイルが変換されるときの遷移アニメーションのプロパティを定義します}

#フォローボタン.アクティブ{
    背景色: 深紅;
}

#行1 {
    position: absolute; /*絶対配置。配置は最も近い位置にある(相対、絶対、固定)祖先要素に基づきます*/
    左: 25px;
    上: 46px;
    表示: ブロック;
    幅: 50px;
    高さ: 8px;
    境界線の半径: 5px;
    背景色: 深紅;
    遷移: すべて線形 .5 秒。
}

#行2 {
    位置: 絶対;
    左: 25px;
    上: 46px;
    表示: ブロック;
    幅: 50px;
    高さ: 8px;
    境界線の半径: 8px;
    背景色: 深紅;
    transform: rotate(90deg); /* 90度回転 */
    遷移: すべて線形 .5 秒。
}

#line1.アクティブ{
    背景色: #ccc;
    /*アニメーションをトリガーします。forward は、アニメーションが終了した後、要素のスタイルがアニメーションの最後のキーフレームのスタイルとして保持されることを意味します */
    アニメーション: ライン 1 .5 秒、前方へのイーズイン アウト;
}

#line2.アクティブ{
    背景色: #ccc;
    アニメーション: ライン2 .5秒のイーズインアウト前進;
}

/* @keyframes はアニメーションを定義します*/
@keyframes 行1 {
    50% {
        幅: 8px;
        高さ: 8px;
        左: 20px;
        上: 52px;
        境界線の半径: 8px;
    }
    100% {
        幅: 30ピクセル;
        左: 20px;
        上: 52px;
        変換: 回転(45度);
    }
}

@keyframes 行2 {
    50% {
        幅: 8px;
        高さ: 8px;
        境界線の半径: 8px;
        左: 35px;
    }
    100% {
        幅: 50px;
        左: 35px;
        変換: 回転(-45度);
    }
}

分割線👇👇👇SVGを使用してチェックマークを描画✔🍻最終的な効果

ここに画像の説明を挿入

👨‍💻実装

html

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="スタイルシート" href="style.css">
    <title>ドキュメント</title>
</head>

<本文>
    <ボタンid="followBtn">
        <div class="line"></div>
        <div class="line"></div>
        <!-- svg を使用して描画 -->
        <!--stroke-linecap はポリラインの角を丸く設定します -->
        <!--stroke-linejoin はポリラインの角を丸く設定します -->
        <svg 幅="70px" 高さ="70px" ストローク幅="8" ストロークラインキャップ="丸型" ストロークライン結合="丸型" 塗りつぶし="なし">
            <ポリライン ポイント="10,37 30,57 60,17" スタイル="stroke: クリムゾン;"></ポリライン>
        </svg>
    </ボタン>
    <script src="index.js"></script>
</本文>

</html>

JS

❗❗❗必ず jQuery 3 を使用してください。バージョン 3 未満では、svg 要素の操作 (クラスの追加) 時にバグが発生します。バージョン 3 ではこの問題が修正されています。

$(関数() {
    $('#followBtn').click(関数(e) {
        $('#followBtn').toggleClass('アクティブ');
        $('.line').toggleClass('active');
        $('ポリライン').toggleClass('アクティブ');
    });
})

CS

体 {
    幅: 1024ピクセル;
    マージン: 0 自動;
}

#フォローボタン{
    位置: 相対的;
    表示: ブロック;
    幅: 100ピクセル;
    高さ: 100px;
    マージン: 100px 自動;
    境界線: なし;
    境界線の半径: 100px;
    背景色: 深紅;
    遷移: すべて線形 .5 秒。
}

#フォローボタン:フォーカス{
    outline: none; /* ブラウザでクリックしても青いボックスは表示されません*/
}

#フォローボタン.アクティブ{
    背景色: #ccc;
}

。ライン {
    position: absolute; /*絶対配置。配置は最も近い位置にある(相対、絶対、固定)祖先要素に基づきます*/
    左: 25px;
    上: 46px;
    幅: 50px;
    高さ: 8px;
    境界線の半径: 8px;
    背景色: #ccc;
    遷移: イーズイン 0;
}

.line:n番目の子(1) {
    変換: 回転(90度);
}

.line.active {
    アニメーション: 0.5 秒先にフェードします。
}

ポリライン
    /*stroke-dasharray プロパティは、曲線を形成するための線の間隔を設定します。
     * 隙間が十分に大きい場合、線は隠れているように見えます * ストロークダッシュオフセットプロパティは、ダッシュパターンからパスの始点までの距離を指定します。0の場合、線は完全に表示されます */
    ストロークダッシュ配列: 80px;
    ストロークダッシュオフセット: 80px;
}

ポリライン.アクティブ{
    アニメーション: 0.5 秒先へ表示します。
    アニメーション遅延: .5秒;
}

@keyframes を表示 {
    に {
        ストロークダッシュオフセット: 0;
    }
}

@keyframes フェード {
    に {
        不透明度: 0;
        変換: 回転(360度) スケール(0.5, 0.5);
    }
}

👨‍🎓インサイト

通常の HTML 要素と SVG 要素は回転方法が異なります。

通常の HTML 要素のtransform-originデフォルトでその中心に設定されます。SVG 要素のtransform-originデフォルトで SVG キャンバスの左上隅に設定されます。

HTML と SVG

ボタンをクリックした後に青いボックスを削除するには、 outline: none;を設定します。

jQuery バージョン 3 未満では、SVG 要素のクラスを正しく変更できません。

//.attr() メソッドは SVG に有効であるため、jQuery を使用する必要がある場合は、.addClass("newclass") の代わりに $("#item").attr("class", "oldclass newclass"); を使用します。
// .removeClass("newclass") の代わりに $("#item").attr("class", "oldclass"); を使用します
// ネイティブ JS ソリューション var element = document.getElementById("item");
// element.setAttribute("class", "oldclass newclass"); を使用します。
// element.setAttribute("class", "oldclass"); を使用します。

🔗参考文献

SVG 要素の変換

jQuery SVG、なぜaddClassができないのですか?

CSS を使用して Douyin サブスクリプション ボタンのアニメーション効果を実現する方法については、これで終わりです。CSS Douyin サブスクリプション ボタンのアニメーションに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  HTMLページの読み込みと解析プロセスの詳細な紹介

>>:  Docker 環境で JMeter+Grafana+influxdb ビジュアル パフォーマンス監視プラットフォームを構築するチュートリアル

推薦する

Linux コンパイル最適化で習得しなければならないいくつかの姿勢のまとめ

01. コンパイルオプションとカーネルコンパイルLinux カーネル (英語: linux kern...

CSS で要素フローティングとクリアフローティングを実装する方法

フローティングの基礎標準ドキュメント フローでは、要素は塊級元素と行內元素の 2 種類に分けられます...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

MySQL テーブル分割後にスムーズにオンラインになる方法

目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...

色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...

Nginx と Lua を使用した JWT 検証の概要

目次序文Lua スクリプトnignx.conf の設定Dockerfileの設定序文データベースやそ...

Node.js コンソールで強調表示されたコードを印刷する方法

序文コードを実行してエラーが発生すると、エラーが出力されます。エラーにはスタック情報が含まれており、...

vue3とvue2の利点の比較

目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...

Dockerリンクはコンテナの相互接続を実現します

目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...

MySQL が自動的に再起動する問題の解決方法

序文最近、テスト環境で MySQL データベースが自動的に再起動し続ける問題が発生しました。原因は、...

写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...

時間のかかるDockerエラーのトラブルシューティングプロセス記録

目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...

CSS で左上の三角形を作成するいくつかの方法の詳細な説明

今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...

mysql8.0.19 の基本データ型の詳細な説明

MySQL 基本データ型一般的な MySQL データ型の概要 ![1036857-201708011...

jsを使ってシンプルなディスククロックを実現する

この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...