要素の円弧モーションを実現する 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 について学ぶ

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

推薦する

Windows Server 2016 に Docker をインストールする方法

最近、Microsoft は Docker をネイティブにサポートする Windows Server...

Vueは州、都市、地区のカスケード選択を実現します

最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカル...

MySQL 5.7.18 zip バージョンのインストールと設定方法のグラフィック チュートリアル (win7)

Windows に mysql5.7.18zip バージョンをインストールするには、使用前に解凍し...

Node.js の TCP 接続処理のコア プロセス

数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...

MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...

MySQL 5.7 zip版(zip版)のインストールと設定手順の詳細

はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...

yum インストールエラーの問題を解決する 保護されたマルチライブラリバージョン

現在、クラウドサーバーに nginx をインストールする際、最初に zlib などの依存ライブラリを...

Vue+el-tableはセルの結合を実現します

この記事の例では、参考までにセルの結合を実現するためのel-tableの具体的なコードを共有していま...

CSS3 で半透明の背景画像と不透明なコンテンツを実現する方法の例

以前のブログのログインページを作成していたときに、この問題に遭遇しました。突然、透明な背景画像と不透...

MySQL インデックスの種類 (通常、ユニーク、フルテキスト) の説明

MySQL のインデックスの種類には、通常のインデックス、一意のインデックス、全文インデックスがあり...

CSS 画像アニメーション効果のサンプルコード(フォトフレーム)

この記事では、CSS 画像アニメーション効果(フォトフレーム)のサンプルコードを紹介し、皆さんと共有...

Nginx での Frp による https への強制リダイレクト設定の詳細な説明

自宅のルーターが300Mの帯域幅を80Mに強制的に減らしたため、3205Uソフトルーターを購入しまし...

Vueはページの部分的なリフレッシュを実装します(ルータビューのページリフレッシュ)

Vue でprovide+inject組み合わせを使用するまず、App.vue を変更する必要があ...

VUE + OPENLAYERSがリアルタイムポジショニング機能を実現

目次序文1. ラベルスタイルを定義する2. GeoJSONデータのシミュレーション3. Vercto...

Linux サーバーのステータスとパフォーマンスに関連するコマンドの詳細な説明

サーバーステータス分析Linux サーバーの CPU の詳細を表示する#CPU情報を表示[root@...