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 をよろしくお願いいたします。 |
>>: 初心者向けウェブサイト構築ガイド⑦:美しいウェブサイトを作るのはとっても簡単
最近、Microsoft は Docker をネイティブにサポートする Windows Server...
最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカル...
Windows に mysql5.7.18zip バージョンをインストールするには、使用前に解凍し...
数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...
では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...
はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...
現在、クラウドサーバーに nginx をインストールする際、最初に zlib などの依存ライブラリを...
この記事の例では、参考までにセルの結合を実現するためのel-tableの具体的なコードを共有していま...
以前のブログのログインページを作成していたときに、この問題に遭遇しました。突然、透明な背景画像と不透...
MySQL のインデックスの種類には、通常のインデックス、一意のインデックス、全文インデックスがあり...
この記事では、CSS 画像アニメーション効果(フォトフレーム)のサンプルコードを紹介し、皆さんと共有...
自宅のルーターが300Mの帯域幅を80Mに強制的に減らしたため、3205Uソフトルーターを購入しまし...
Vue でprovide+inject組み合わせを使用するまず、App.vue を変更する必要があ...
目次序文1. ラベルスタイルを定義する2. GeoJSONデータのシミュレーション3. Vercto...
サーバーステータス分析Linux サーバーの CPU の詳細を表示する#CPU情報を表示[root@...