CSS3 でパノラマ特殊効果を実現_html/css_WEB-ITnose

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

最終的な効果のデモンストレーション: デモ

ページ レイアウト

<div class="panorama"></div>

基本スタイル

最初にいくつかの基本スタイルとアニメーションを定義します

.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;  }}

background-size: auto 100%; このコードは、画像の高さをコンテナの高さと等しくすることを意味し、水平方向は自動的に行われます。つまり、画像の左端がコンテナの左側と一致します。コンテナ。

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

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

ここまでの説明では、Web ページを開くと、水平方向に前後にスライドする効果のある画像がすぐに表示されます。ただしこの場合、訪問者はアニメーションに魅了され、実際のコンテンツを無視する可能性があります。私たちの要件は、マウスが画像上にあるときに動くようにすることです。もちろん、この効果は簡単に実現できます。

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

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

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

アニメーションの最適化

効果は得られますが、マウスが画像の外に出ると、画像はすぐに元の位置に戻ってしまうことがわかります。私たちにとって、これは少し突然ですが、マウスが移動したときに画像の現在位置を記録し、アニメーションを継続するにはどうすればよいでしょうか。

アニメーションの 2 つの状態 (一時停止と実行) を表す、animation-play-state: 一時停止 | 実行中というプロパティを利用できます。

完全な CSS コード

.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;  animation-play-state: paused;}.panorama:hover,.panorama:focus {  animation-play-state: running;}@keyframes panorama {  to {    background-position: 100% 0;  }}

この記事は私のブログでも読むことができます。あなたの関心が私の執筆の最大の動機です。ご支援いただきありがとうございます。