少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、最近フロントエンドの知識を勉強しているところです。そこで自分でどう実装するかを考えてみたところ、最終的な効果は良かったものの、自分がやったことは十分ではないと感じました。参考用です。 🍻 最終効果 💡 アイデア
👨💻実装 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 要素の ボタンをクリックした後に青いボックスを削除するには、 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 を応援していただければ幸いです。 |
>>: Docker 環境で JMeter+Grafana+influxdb ビジュアル パフォーマンス監視プラットフォームを構築するチュートリアル
01. コンパイルオプションとカーネルコンパイルLinux カーネル (英語: linux kern...
フローティングの基礎標準ドキュメント フローでは、要素は塊級元素と行內元素の 2 種類に分けられます...
目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...
目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...
さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...
目次序文Lua スクリプトnignx.conf の設定Dockerfileの設定序文データベースやそ...
序文コードを実行してエラーが発生すると、エラーが出力されます。エラーにはスタック情報が含まれており、...
目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...
目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...
序文最近、テスト環境で MySQL データベースが自動的に再起動し続ける問題が発生しました。原因は、...
はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...
目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...
今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図(幅と高さを60p...
MySQL 基本データ型一般的な MySQL データ型の概要 ![1036857-201708011...
この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...