画像の回転を作成するための純粋な HTML5+CSS3-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

不言

Jun 05, 2018 pm 03:00 PM

css3 html5 画像の回転

この記事では、画像の回転を生成するための純粋な 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 つの属性は、アニメーション実行の初期値と終了値を指定します。