この記事では CSS3 ブラック テクノロジーについて説明します: CSS のみを使用してパノラマ効果を実現する方法
最終的な効果のデモ: デモ ページレイアウト
基本的なスタイルとアニメーション
1 |
|
background- size: auto 100% このコードは、画像の高さがコンテナの高さに等しく、水平方向が自動であることを意味します。つまり、イメージの左端がコンテナの左側に接続されます。
アニメーションを実行するプロセスは、サイクル、交互、リニアであり、期間は10秒です。
アニメーションの実行を手動で制御する
ここまでは、Webページを開くと、前後に水平にスライドする効果のある画像がすぐに表示されます。 。ただしこの場合、訪問者はアニメーションに魅了され、実際のコンテンツを無視する可能性があります。
もちろん、この効果は非常に簡単に実現できます。
前のアニメーションを削除し、次のスタイルを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
現在の効果は次のとおりです: マウスを画像内に移動すると、画像が水平方向に前後にスライドし始めます。
アニメーションの最適化
効果は得られていますが、マウスが画像の外に移動すると、画像はすぐに元の位置に戻ってしまうことがわかります。 。
これは少し突然ですが、画像の現在位置を記録し、マウスが移動したときにアニメーションを継続するにはどうすればよいですか
このプロパティanimation-play-を信頼できます状態: 一時停止 | 実行中。これは、アニメーションの 2 つの状態 (一時停止と実行) を表します。
完全なCSSコード
1 2 3 4 |
|
以上がCSS3のみを使用してパノラマ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。