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 タイトル属性をラップする方法

推薦する

JavaScriptの無限ループを検出して防止する方法の詳細な説明

目次序文for文の無限ループを修正while文の無限ループを修正要約する序文Js デッド ループはど...

2012年のベストWebデザイン作品レビュー[パート1]

新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...

MySQL 4 の一般的なマスタースレーブレプリケーションアーキテクチャ

目次1つのマスターと複数のスレーブのレプリケーションアーキテクチャマルチレベルレプリケーションアーキ...

MySQL トリガー: トリガーの作成と使用

この記事では、例を使用して MySQL トリガーの作成と使用について説明します。ご参考までに、詳細は...

mysql8.0.19 の基本データ型の詳細な説明

MySQL 基本データ型一般的な MySQL データ型の概要 ![1036857-201708011...

Tomcatの再構成後に起動が遅くなる問題を迅速に解決

Jenkins+Tomcatサーバーの設定中に、Tomcat設定ファイルが変更され、サーバーのTom...

Nginx で HTTPS 証明書を構成する詳細なプロセス

1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

React+axios は github 検索ユーザー機能を実装します (サンプル コード)

負荷リクエスト成功リクエストに失敗しました cmdをクリックし、ファイルパスでEnterキーを押しま...

Linux の MariaDB データベースについて

目次Linux の MariaDB データベースについて1. データベースとは何ですか? 2. デー...

SQL文のパフォーマンスを分析するための標準的な要約

この記事では、explain を使用して SQL ステートメントを分析する方法を紹介します。実際、イ...

MySQL 8.0 のタイムゾーン問題を解決する手順

ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.16-wi...

HTML テーブル マークアップ チュートリアル (22): 行の境界線の色属性 BORDERCOLORLIGHT

行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...

MySQL DEFINER の使用方法の詳細な説明

目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...

jsで七夕告白連打の効果を実現、jQueryで連打技術を実現

この記事では、jsとjQueryテクノロジーを使用して告白弾幕を実現する方法を紹介します。具体的な内...