本篇文章為大家展示了使用CSS3怎么實(shí)現(xiàn)一個(gè)全景圖特效，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
基本代碼
html代碼：
首先定義一些基本的樣式和動(dòng)畫(huà)：
重慶分公司
重慶分公司
.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%;這段代碼的意思是讓圖片的高等于容器的高，并且水平方向自動(dòng)，即圖片最左邊貼著容器左側(cè)。
執(zhí)行動(dòng)畫(huà)的流程是：周而復(fù)始、往復(fù)交替、線性并且時(shí)間周期是10s。
手動(dòng)控制動(dòng)畫(huà)執(zhí)行
現(xiàn)在我們實(shí)現(xiàn)當(dāng)鼠標(biāo)懸浮于圖片時(shí)才讓它動(dòng)起來(lái)，鼠標(biāo)離開(kāi)讓它靜止。
需要用到這個(gè)屬性animation-play-state: paused | running，它表示動(dòng)畫(huà)的兩個(gè)狀態(tài)：暫停和運(yùn)行。
完整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;
}
}上述內(nèi)容就是使用CSS3怎么實(shí)現(xiàn)一個(gè)全景圖特效，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
