ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3画像の回転を実現するにはどうすればよいですか? CSS3で画像回転アニメーション効果を実現する方法
CSS3画像の回転を実現するにはどうすればよいですか? CSS3で画像回転アニメーション効果を実現する方法
- 不言オリジナル
- 2018-09-12 14:24:4010944ブラウズ
ウェブページでは、画像が回転しているのをよく見かけますが、このような画像の回転はどのようにして実現されるのでしょうか?この記事では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 学習マニュアル へ。
関連する推奨事項:CSS3 で画像の拡大と回転を実現する_html/css_WEB-ITnose
CSS3 はどのようにして画像の連続回転の効果を実現できますか? 【詳しい説明】
以上がCSS3画像の回転を実現するにはどうすればよいですか? CSS3で画像回転アニメーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。