本篇文章給大家帶來的內容是關於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; }}