CSS を使用して要素の円弧の動きを制御する方法 CSS3 の新しい属性 transfrom トランジション効果によって、要素の移動、回転、拡大縮小を実現できることは誰もが知っています。アニメーション属性と組み合わせることで、要素のアニメーション効果を実現できます。しかし、CSS を使用して要素の円弧移動を実現する方法は次のとおりです。 上のアニメーションに示すように、ボールは弧を描いて動きます。動きを分析します。
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 次ベジェ関数の値を自分で調整できます。ウェブサイトポータルによると。
現時点での 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 をよろしくお願いいたします。 |
>>: 初心者向けウェブサイト構築ガイド⑦:美しいウェブサイトを作るのはとっても簡単
Postfix は、Linux システム上で電子メールをルーティングまたは配信するために使用される無...
この記事はRHEL7.5でのMySQL 8.0.11のインストールチュートリアルを記録しています。具...
デフォルトの Linux カーネル パラメータは最も一般的なシナリオに基づいており、高い同時アクセス...
グリッドレイアウト親要素に追加された属性グリッドテンプレートの列/グリッドテンプレートの行要素の行ま...
目次現象:ポートの使用:ファイルにスペルミスがあります:現象: Tomcat がインストールされ、W...
目次序文文章1. 終了1.1 クロージャとは何ですか? 1.2 クロージャの特性1.3 クロージャを...
1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...
watch : データの変更を監視する(特定の値の変更イベント) vue2.x データ(){ 戻る ...
目次1. はじめに2. 思考分析3. クラウド決済のケーススタディ1. クラウド機能1-1. 認証不...
ページでビデオ タグを使用する場合は、Ogg Theora または VP8 (これに問題がない場合)...
目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...
目次1. シンプルなページの例2.uni-appはvueコンポーネントとミニプログラムネイティブコン...
コードをコピーコードは次のとおりです。 <input type="text"...
事前に書いておきます:次の手順では、ターミナルにコマンドを入力する必要があります。コンピューターでブ...
多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...