本篇文章為大家展示了使用CSS3怎么實現(xiàn)一個全景圖特效,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)吉安,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575基本代碼
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%;
這段代碼的意思是讓圖片的高等于容器的高,并且水平方向自動,即圖片最左邊貼著容器左側(cè)。
執(zhí)行動畫的流程是:周而復(fù)始、往復(fù)交替、線性并且時間周期是10s。
手動控制動畫執(zhí)行
現(xiàn)在我們實現(xiàn)當(dāng)鼠標(biāo)懸浮于圖片時才讓它動起來,鼠標(biāo)離開讓它靜止。
需要用到這個屬性animation-play-state: paused | running
,它表示動畫的兩個狀態(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怎么實現(xiàn)一個全景圖特效,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目:使用CSS3怎么實現(xiàn)一個全景圖特效-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明:http://muchs.cn/article4/pcdoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、品牌網(wǎng)站設(shè)計、Google、品牌網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容