CSS3中怎么實現(xiàn)全景圖的動畫效果

這篇文章主要為大家展示了“CSS3中怎么實現(xiàn)全景圖的動畫效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS3中怎么實現(xiàn)全景圖的動畫效果”這篇文章吧。

　　html代碼：

　　<divclass="panorama"></div>

　　首先定義一些基本的樣式和動畫：

　　.panorama{

　　width:300px;

　　height:300px;

　　background-image:url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);

　　background-size:auto100%;

　　cursor:pointer;

　　animation:panorama10slinearinfinitealternate;

　　}

　　@keyframespanorama{

　　to{

　　background-position:100%0;

　　}

　　}

　　background-size:auto100%;這段代碼的意思是讓圖片的高等于容器的高，并且水平方向自動，即圖片最左邊貼著容器左側(cè)。

　　執(zhí)行動畫的流程是：周而復(fù)始、往復(fù)交替、線性并且時間周期是10s。

　　手動控制動畫執(zhí)行

　　現(xiàn)在我們實現(xiàn)當(dāng)鼠標(biāo)懸浮于圖片時才讓它動起來，鼠標(biāo)離開讓它靜止。

　　需要用到這個屬性animation-play-state:paused|running，它表示動畫的兩個狀態(tài)：暫停和運行。

　　完整CSS代碼：

　　.panorama{

　　width:300px;

　　height:300px;

　　background-image:url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);

　　background-size:auto100%;

　　cursor:pointer;

　　animation:panorama10slinearinfinitealternate;

　　animation-play-state:paused;

　　}

　　.panorama:hover,

　　.panorama:focus{

　　animation-play-state:running;

　　}

　　@keyframespanorama{

　　to{

　　background-position:100%0;

　　}

　　}

以上是“CSS3中怎么實現(xiàn)全景圖的動畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！