CSS3画像の回転を実現するにはどうすればよいですか? CSS3で画像回転アニメーション効果を実現する方法-CSSチュートリアル-php.cn

CSS3画像の回転を実現するにはどうすればよいですか? CSS3で画像回転アニメーション効果を実現する方法

不言

リリース： 2018-09-12 14:24:40

オリジナル

10875 人が閲覧しました

ウェブページでは、画像が回転しているのをよく見かけますが、このような画像の回転はどのようにして実現されるのでしょうか?この記事ではCSS3で画像の回転アニメーション効果を実現する方法を紹介します。

CSS3 で画像の回転を実現するには、-webkit-animation と @-webkit-keyframes を組み合わせて使用できます。

-webkit-animation は、次のように定義される複合属性です。

-webkit-animation: name、duration、timing-function、delay iteration_count、direction

name: は、@-webkit で指定する必要があるメソッドです。 -キーフレーム、アニメーションを実行するために使用します。

duration: 1 サイクルでのアニメーションの実行時間。

timing-function: アニメーション実行の効果は線形である場合もあれば、「高速インおよび低速アウト」などの場合もあります。

lay: アニメーションの遅延実行時間。

iteration_count: アニメーションループの実行回数無限の場合は無限に実行されます。

direction: アニメーションの実行方向。

@-webkit-keyframes の from と to の 2 つの属性は、アニメーション実行の初期値と終了値を指定します。

-webkit-animation-play-state:paused; アニメーションの実行を一時停止します。

画像回転を実装するために css3 で使用される属性値を理解した後、画像回転アニメーションを実装するための css3 のコードを直接見てみましょう:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>transform</title>
  <style>
    #loader {
        display: block;
        position: relative;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
  </style>
 </head>
 <body>
  <div id="test" >
　　<img src="http://img4.imgtn.bdimg.com/it/u=3413495237,2076545415&fm=26&gp=0.jpg" style="width:250px;height:250px" id="loader" />  
  </div>
 </body>
</html>

ログイン後にコピー

この記事はここで終わります。css3 のアニメーション属性の詳細については、こちらを参照してください。

css3 学習マニュアルへ。