本文介紹了CSS3實現全景圖特效示例代碼，分享給大家，具體如下：

基本代碼

html代碼：

<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%; 

執行動畫的流程是：周而復始、往復交替、線性并且時間周期是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;
}
}