ホームページ >ウェブフロントエンド >CSSチュートリアル >画像の回転を作成するための純粋な HTML5+CSS3

画像の回転を作成するための純粋な HTML5+CSS3

不言オリジナル: 2018-06-05 15:00:041866ブラウズ

この記事では、画像の回転を生成するための純粋な HTML5 + CSS3 を主に紹介します。HTML5 と CSS3 を組み合わせて実現できるアニメーションの特殊効果は、比較的簡単に実装できます。興味のある方は参考にしてください。この例は非常に多くのプロジェクトに適用できます。実用的ですので、ぜひ皆さんも使いこなしていただければと思います。

効果の画像は次のとおりです:

この効果を実現するのは実際には難しくありません。コードのリストは次のとおりです:

XML/HTML コード

コンテンツをクリップボードにコピーします

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #liu{     
            width:280px;     
            height: 279px;     
            background: url(shishi.png) no-repeat;     
            border-radius:140px;     
            -webkit-animation:run 6s linear 0s infinite;     
        }     
        #liu:hover{     
            -webkit-animation-play-state:paused;     
        }     
        @-webkit-keyframes run{     
            from{     
                -webkit-transform:rotate(0deg);     
            }     
            to{     
                -webkit-transform:rotate(360deg);     
            }     
        }     
    </style>
</head>
<body>
    <p id="liu"></p>
</body>
</html>

1. ID は liu p であり、画像を表示するために使用される領域ですが、ここでの画像は背景画像であり、角を丸く設定することで丸みを帯びた効果が得られます。

2. コードの重要な部分は、画像を無限に回転させる方法です。これを実現するには、-webkit-animation と @-webkit-keyframes を組み合わせて使用します。

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

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

name: は、@-webkit-keyframes で指定する必要があるメソッドです。実行アニメーション用。

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

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

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

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

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

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

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

上記がこの記事の全内容です。画像回転の特殊効果を実現する際に皆さんのお役に立てれば幸いです。

画像の回転を作成するための純粋な HTML5+CSS3

関連記事