要素の円弧モーションを実現する CSS3 サンプルコード

要素の円弧モーションを実現する CSS3 サンプルコード

CSS を使用して要素の円弧の動きを制御する方法

CSS3 の新しい属性 transfrom トランジション効果によって、要素の移動、回転、拡大縮小を実現できることは誰もが知っています。アニメーション属性と組み合わせることで、要素のアニメーション効果を実現できます。しかし、CSS を使用して要素の円弧移動を実現する方法は次のとおりです。

上のアニメーションに示すように、ボールは弧を描いて動きます。動きを分析します。

  • ボールの動きを X 軸と Y 軸の 2 つの動きに分けると、X 軸上のボールは (遅い-速い) の速度で動きます。
  • ボールは Y 軸に沿って (速い-遅い) の速度で移動します。
  • 2つの軸の動きを組み合わせて円弧効果を実現します

3次ベジェ関数

animation プロパティには、アニメーションの速度関数である animation-timing-function プロパティがあります。このプロパティは、3 次ベジェ関数と呼ばれる数学関数を使用して速度曲線を生成します。

3次ベジェ関数 (x1, y1, x2, y2): (3次ベジェ関数の具体的な意味については、関連資料を参照してください):


このウェブサイト ポータルを使用すると、曲線の値をリアルタイムで調整できます。 animation-timing-function 属性には、よく使用される、ease、linear、ease-in、ease-out、ease-in-out などのパッケージ化された速度関数がすでにいくつか用意されています。

効果の実現

まず考えられるのは、X軸とY軸の変位アニメーションを分離することです。ただし、要素のアニメーションは一度に 1 つのアニメーション (最後に宣言されたアニメーション) しか実行できません。そこで、別の観点から考えて、2 つの親子要素を使用することができます。親要素に X 軸の変位アニメーションを追加し、子要素に Y 軸の変位アニメーションを追加します。具体的なコードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>要素の円弧の動き</title>
    <スタイル>
        。箱{
            幅: 400ピクセル;
            高さ: 400px;
            境界線: 2px 実線 #ff8800;
        }
        スパン{
            表示: ブロック;
            幅: 40px;
            高さ: 40px;
            境界線: 1px 実線 #222;
            アニメーション: center1 2s 前方へのイーズイン;

        }
        span:後{
            コンテンツ: '';
            表示: ブロック;
            幅: 40px;
            高さ: 40px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            境界線の半径: 20px;
            背景: 緑黄色;
            アニメーション: center2 2s 前方へのイーズアウト;
        }
        @キーフレーム 中心1 {
            {変換: translateX(360px)}
        }
        @keyframes 中心2 {
            {変換: translateY(360px)}
        }
    </スタイル>
</head>
<本文>
<div class="box">
    <span></span>
</div>
</本文>
</html>

このとき、子要素を置き換えるために要素の疑似クラス after を使用しましたが、効果は同じです。 span に色付きの境界線を付けると、2 つの要素の移動軌跡を簡単に観察できます。 アニメーション効果は次のとおりです。

この時点では、緑色のボールが弧を描いて動いていることはまだ比較的明らかです。

拡張機能:

この時点で円弧の大きさが十分でなかったり、円弧が目立たないと感じる場合は、3 次ベジェ関数の値を自分で調整できます。ウェブサイトポータルによると。

  • イーズインカーブ効果を選択します。次に、x1 と y1 の値を変更します (赤い点を右に引っ張ります)。次に、この時点で cubic-bezier() 値をコピーします。元のスパンのアニメーションのイーズイン位置をこの値に置き換えます。
  • イーズアウトカーブ効果を選択します。次に、x2とy2の値を変更します(青い点を右に引っ張ります)。次に、この時点で cubic-bezier() 値をコピーします。アニメーションのイーズアウト位置後の元の span 疑似クラスをこの値に置き換えます。

現時点での CSS コードは次のとおりです。

スパン{
            表示: ブロック;
            幅: 40px;
            高さ: 40px;
            境界線: 1px 実線 #222;
            アニメーション: center1 2s cubic-bezier(.66,.01,1,1) 前方;

        }
        span:後{
            コンテンツ: '';
            表示: ブロック;
            幅: 40px;
            高さ: 40px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            境界線の半径: 20px;
            背景: 緑黄色;
            アニメーション: center2 2s cubic-bezier(0,0,.36,1) 前方;
        }

このときのアニメーション効果の弧はさらに明白です。

これで、CSS3 で要素アークモーションを実装するサンプルコードに関するこの記事は終了です。CSS3 要素アークモーションに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Linux での UDP について学ぶ

>>:  初心者向けウェブサイト構築ガイド⑦:美しいウェブサイトを作るのはとっても簡単

推薦する

CentOS 8 に Postfix メール サーバーをインストールして設定する方法

Postfix は、Linux システム上で電子メールをルーティングまたは配信するために使用される無...

RHEL7.5 mysql 8.0.11 インストールチュートリアル

この記事はRHEL7.5でのMySQL 8.0.11のインストールチュートリアルを記録しています。具...

高並列処理 nginx サーバー向け Linux カーネル最適化構成の説明

デフォルトの Linux カーネル パラメータは最も一般的なシナリオに基づいており、高い同時アクセス...

CSS のグリッドプロパティの使用に関する詳細な説明

グリッドレイアウト親要素に追加された属性グリッドテンプレートの列/グリッドテンプレートの行要素の行ま...

なぜ Tomcat が起動できないのでしょうか?

目次現象:ポートの使用:ファイルにスペルミスがあります:現象: Tomcat がインストールされ、W...

js クロージャとガベージ コレクション メカニズムの例の詳細な説明

目次序文文章1. 終了1.1 クロージャとは何ですか? 1.2 クロージャの特性1.3 クロージャを...

MySQL mysqldump の使い方の詳しい説明

1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...

Vue2 と Vue3 でウォッチ リスナーを使用する方法

watch : データの変更を監視する(特定の値の変更イベント) vue2.x データ(){ 戻る ...

クラウド決済を実装するWeChatミニプログラムについて

目次1. はじめに2. 思考分析3. クラウド決済のケーススタディ1. クラウド機能1-1. 認証不...

HTMLページにビデオを挿入する方法の概要

ページでビデオ タグを使用する場合は、Ogg Theora または VP8 (これに問題がない場合)...

JavaScript タイマーの詳細

目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...

uniappとvueの違いの詳細な説明

目次1. シンプルなページの例2.uni-appはvueコンポーネントとミニプログラムネイティブコン...

Ubuntu 18.04はルート権限を取得し、ルートユーザーとしてログインします

事前に書いておきます:次の手順では、ターミナルにコマンドを入力する必要があります。コンピューターでブ...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...