CSS3のみを使用してパノラマ効果を実現する方法

この記事では CSS3 ブラック テクノロジーについて説明します: CSS のみを使用してパノラマ効果を実現する方法

最終的な効果のデモ: デモ ページレイアウト

基本的なスタイルとアニメーション

<p class="panorama"></p>

background- size: auto 100% このコードは、画像の高さがコンテナの高さに等しく、水平方向が自動であることを意味します。つまり、イメージの左端がコンテナの左側に接続されます。

アニメーションを実行するプロセスは、サイクル、交互、リニアであり、期間は10秒です。

アニメーションの実行を手動で制御する

ここまでは、Webページを開くと、前後に水平にスライドする効果のある画像がすぐに表示されます。 。ただしこの場合、訪問者はアニメーションに魅了され、実際のコンテンツを無視する可能性があります。

もちろん、この効果は非常に簡単に実現できます。

前のアニメーションを削除し、次のスタイルを追加します。

.panorama {
  width: 300px;
  height: 300px;
  background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);
  background-size: auto 100%;
  cursor: pointer;
  animation: panorama 10s linear infinite alternate;
}

@keyframes panorama {
  to {
    background-position: 100% 0;
  }
}

現在の効果は次のとおりです: マウスを画像内に移動すると、画像が水平方向に前後にスライドし始めます。

アニメーションの最適化

効果は得られていますが、マウスが画像の外に移動すると、画像はすぐに元の位置に戻ってしまうことがわかります。 。

これは少し突然ですが、画像の現在位置を記録し、マウスが移動したときにアニメーションを継続するにはどうすればよいですか

このプロパティanimation-play-を信頼できます状態: 一時停止 | 実行中。これは、アニメーションの 2 つの状態 (一時停止と実行) を表します。

完全なCSSコード

.panorama:hover,
.panorama:focus {
  animation: panorama 10s linear infinite alternate;
}

以上がCSS3のみを使用してパノラマ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。