本文主要和大家介紹了CSS3實現全景圖特效範例程式碼的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
基本程式碼
html程式碼：
<p class="panorama"></p>
首先定義一些基本的樣式和動畫：
.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%; 這段程式碼的意思是讓圖片的高等於容器的高，並且水平方向自動，即圖片最左邊貼著容器左側。
執行動畫的流程是：周而復始、往復交替、線性且時間週期是10s。
手動控制動畫執行
現在我們實作當滑鼠懸浮於圖片時才讓它動起來，滑鼠離開讓它靜止。
需要用到這個屬性animation-play-state: paused | running，它表示動畫的兩個狀態：暫停和運行# 。
完整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;
}
}相關推薦：
以上是CSS3如何實現全景圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！
