ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS3で円形の回転効果を実現する方法

CSS3で円形の回転効果を実現する方法

WBOY
WBOYオリジナル
2022-03-22 12:17:193044ブラウズ

方法: 1. "border-radius:100%" を使用して要素を円形に設定します; 2. "@keyframes name {100%{transform:rotate(360deg);}}" を使用して設定しますアニメーション; 3. 、「animation: name time」を使用してアニメーション効果を要素にバインドします。

CSS3で円形の回転効果を実現する方法

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 で円形の回転効果を実現する方法

border-radius を使用すると、要素の外側の境界線の丸い角を設定できます。 1 つの半径を使用する場合は円を決定し、2 つの半径を使用する場合は楕円を決定します。この (楕円) 円と境界線の交差により、丸い角の効果が作成されます。

@keyframes ルールを使用して、アニメーションを作成できます。

ある CSS スタイル設定から別の CSS スタイル設定に徐々に変更してアニメーションを作成します。

CSS スタイル設定は、アニメーション処理中に何度でも変更できます。

% またはキーワード「from」と「to」(0% ~ 100% と同じ) を使用して、いつ変更が発生するかを指定します。

0% はアニメーションの開始時、100% はアニメーションの完了時です。

ブラウザを最適にサポートするには、常に 0% と 100% のセレクターを定義する必要があります。

構文は次のとおりです:

@keyframes animationname {keyframes-selector {css-styles;}}

アニメーション属性の構文は次のとおりです:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • animation-name にバインドされるキーフレームの名前を指定します。 selector

  • animation-duration アニメーションは、完了するまでにかかる秒数またはミリ秒数を指定します。

  • animation-timing-function アニメーションの実行方法を設定します。サイクルを完了する

  • animation-delay は、アニメーションが開始するまでの遅延間隔を設定します。

  • animation-iteration-count アニメーションの再生回数を定義します。

  • animation-direction アニメーションを逆方向に順番に再生するかどうかを指定します。

  • animation-fill-mode は、アニメーションが再生されていないとき (アニメーションが完了したとき、またはアニメーションの再生開始前に遅延があるとき) に要素に適用するスタイルを指定します。 )。

  • animation-play-state アニメーションが実行中か一時停止中かを指定します。

例は次のとおりです:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
#example1
{
background:#dddddd;
width:100px;
height:100px;
border-radius:100%;
text-align:center;
animation:fadenum 5s;
}
@keyframes fadenum{
   100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div id="example1">
  这是一个圆
</div>
<br><br>
</body>
</html>

出力結果:

CSS3で円形の回転効果を実現する方法

(学習ビデオ共有: css ビデオチュートリアル)

以上がCSS3で円形の回転効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。