CSS3 を使用して楕円軌道の回転を実装するサンプルコード

CSS3 を使用して楕円軌道の回転を実装するサンプルコード

最近、次のような効果を達成する必要がある

最初は、CSS3D回転を使用して記述すると、次の効果しか得られません

全ての円を正面に向けることができません。操作が間違っているのか、3D回転ができないのか分かりません。どなたかご存知の方がいらっしゃいましたら、ご教授ください。

3Dでは実現できないので2Dにするしかないのですが、楕円に沿った回転が実現できれば大丈夫です。

X軸とY軸は長方形内で移動する

パスはスラッシュです

 。ボール {
    アニメーション: 
      animX 2s 線形無限交互、
      アニメーション 2s 線形 無限 交互
  }
@keyframes アニメーションX{
      0% {左: 0px;}
    100% {左: 500px;}
}
@keyframes アニメーションY{
      0% {上: 0px;}
    100% {上部: 300px;}
} 

アニメーション遅延の設定

Y軸の遅延をアニメーション期間の半分に設定します。モーションの軌跡がダイヤモンド形になることがわかります。少し良くなったように感じます。

 。ボール {
    アニメーション: 
      animX 2s 線形 0s 無限交互、
      アニメーション 2秒 線形 -1秒 無限 交互
  } 

3次ベジェ曲線を設定します

 。ボール {
    アニメーション: 
      animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s 無限交互、
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s 無限交互
  }

ズームインとズームアウト

立体的に見せるために、 scale属性を追加します。スケールアニメーションは、X軸とY軸の時間の合計になります。

.ボール1 {
    アニメーション: 
      animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s 無限交互、
      animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s 無限交互、
      スケール 4s cubic-bezier(0.36, 0, 0.64, 1) 0s 無限交互;
  }
 @keyframesスケール{

    0% {
      変換: スケール(0.7)
    }
    50% {
      変換: スケール(1)
    }
    100% {
      変換: スケール(0.7)
   }
 } 

ミッション完了!

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Vueはシンプルなマーキー効果を実装します

>>:  HTML タイトル属性をラップする方法

推薦する

シェルスクリプトは、Docker の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。

Docker 公開方法は、DevOps (送信、コンパイル、パッケージ化、リリースなどの一連のイベ...

JavaScript でフロントエンドのカウントダウン効果を実装する

この記事では、フロントエンドのカウントダウン効果を実現するためのJavaScriptの具体的なコード...

MySQLクエリ結果をCSVにエクスポートする方法

MySQL クエリ結果をcsvにエクスポートするには、通常、php を使用して mysql に接続し...

Vue で動的に読み込まれたローカル画像を処理する方法

問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...

Dockerのインストール方法とDockerの4つのネットワークモードの詳細説明

1. Dockerをインストールするyum -y install docker-ioインストールが完...

Dockerコマンドの自動補完の実装

序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...

Vueで配列の変更を監視する方法

目次序文ソースコード学習の第一歩はどこから始めればよいでしょうか?写真から始めましょうソースコードを...

MAC で MySQL のデフォルトの文字セットを utf8 に変更する方法

1. デフォルトでインストールされているMySQLの文字セットを確認するmysql> '...

JavaScript実行メカニズムの詳細な紹介

目次1. プロセスとスレッドの概念2. ブラウザの原則3. 同期と非同期4. 実行スタックとタスクキ...

Vue3+TypeScriptはaxiosをカプセル化し、リクエスト呼び出しを実装します

まさか、2021年になってもTypeScriptについて聞いたことがない人がいるなんて?プロジェクト...

Prometheus+Grafanaによるnginxの監視方法を分析する

目次1. ダウンロード2. nginxとnginx-vts-exporterをインストールする3. ...

Linuxサーバ侵入緊急対応記録(概要)

最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...

MySQL 圧縮パッケージ版 zip インストール設定方法

圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...

MySQLトランザクションとSpring分離レベルの実装原理の詳細な説明

1. トランザクションはACID特性を持つ原子性: トランザクションは、トランザクションによって分割...