ホームページ > 記事 > ウェブフロントエンド > CSS アニメーション チュートリアル: 回転とズームの効果を実装する方法を段階的に説明します。
CSS アニメーション チュートリアル: 回転とズームの効果を実装する方法を段階的に説明します。
- PHPzオリジナル
- 2023-10-18 10:22:481687ブラウズ
CSS アニメーション チュートリアル: 回転とスケーリング効果を実現する方法を段階的に説明します
CSS アニメーションは、Web ページ上でインタラクティブな効果を実現するための重要なテクノロジの 1 つです。 。このチュートリアルでは、CSS を使用して回転と拡大縮小の効果を実現する方法を段階的に説明します。このチュートリアルを学習する前に、CSS の基本をある程度理解していることを確認してください。
- 準備
始める前に、Sublime Text、Visual Studio Code などのコードを記述するためのエディターが必要です。コードを記述するときに、HTML ファイルを作成し、そのファイルに CSS スタイルを導入できます。
- HTML 構造の作成
まず、HTML 構造を作成する必要があります。この例では、単純な円を作成します。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="circle"></div> </body> </html>
上記のコードでは、style.css という名前の CSS ファイルを導入し、本文にクラス Circle を含む div 要素を作成しました。
- CSS スタイルの記述
次に、style.css ファイルに CSS スタイルを記述します。まず、.circle 要素の幅と高さを設定し、その形状を円に設定する必要があります。
.circle {
width: 200px;
height: 200px;
background-color: #ff0000;
border-radius: 50%;
}上記のコードでは、.circle 要素の幅と高さを 200px に設定し、その角を 50% に設定して、円を形成します。
- アニメーション効果の追加
次に、アニメーション効果を .circle 要素に追加します。このアニメーションには、回転とスケーリングの 2 つの部分が含まれます。
まず、回転アニメーションを追加します。 .style.css ファイルに、次のコードを追加します。
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.circle {
/* 省略之前的代码 */
animation: rotate 4s infinite;
}上記のコードでは、@keyframes キーワードを使用して、rotate という名前のアニメーションを定義しました。このアニメーションは、○要素を 0 度回転する 0% の初期状態から始まり、○ 要素を 360 度回転する 100% の終了状態まで続きます。次に、アニメーション属性を使用してこのアニメーションを .circle 要素に適用し、アニメーションの継続時間を 4 秒に設定して、無限回繰り返します。
次に、ズームアニメーションを追加します。 .style.css ファイルに、次のコードを追加します。
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.circle {
/* 省略之前的代码 */
animation: rotate 4s infinite, scale 2s infinite;
}上記のコードでは、@keyframes キーワードを使用して、scale という名前のアニメーションを定義しました。このアニメーションは、.circle 要素を元のサイズに保つ 0% の初期状態から始まり、.circle 要素を 1.5 倍に拡大する 50% の中間状態、そして .circle 要素を返す 100% の終了状態まで続きます。元のサイズに戻します。次に、アニメーション属性を使用してこのアニメーションを .circle 要素に適用し、アニメーションの継続時間を 2 秒に設定して、無限回繰り返します。
- 効果の表示
これで、この HTML ファイルを保存して実行し、ブラウザで効果を確認できます。回転およびズームする円が表示されます。ニーズに応じて CSS スタイルとアニメーション プロパティを変更し、さまざまな回転効果やスケーリング効果を実現できます。
概要
CSS アニメーションは、Web ページでさまざまなインタラクティブな効果を実現するのに役立ちます。このチュートリアルでは、CSS を使用して回転と拡大縮小の効果を実現する方法を段階的に説明します。このチュートリアルを学習することで、基本的な CSS アニメーション技術を習得し、実際のプロジェクトに適用できるようになると幸いです。 CSS アニメーションの技術や手法についてさらに詳しく知りたい場合は、引き続き深く学習してください。素晴らしい CSS アニメーションを書いて頑張ってください!
以上がCSS アニメーション チュートリアル: 回転とズームの効果を実装する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。