今回は、HTML5で画像が回転するアニメーション効果を実現する方法を紹介します。 HTML5で画像が回転するアニメーション効果を実現するための注意点は何ですか?実際の事例を見てみましょう。
1. まず効果を見てみましょう:
2. コードは次のとおりです:
<img alt="HTML5で画像回転のアニメーション効果を実現する方法" > @mixin ani-btnRotate{ @keyframes btnRotate{ from{transform: rotateZ(0);} to{transform: rotateZ(360deg);} } } @include ani-btnRotate; #circle{ position: absolute; left: 50%; width: REM(338); height: REM(338); margin-top: REM(200); margin-left: REM(-338/2); transform-origin: center center ; animation: btnRotate 1s 1s linear forwards; }
使用されている画像は次のとおりです: (白い回転画像です)
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
選択ドロップダウンボックスの右側にプロンプトアイコンを追加する方法
以上がHTML5で画像回転のアニメーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。