CSS3讓我們可以為網頁添加各種動畫效果,其中一個常見的是讓div飛入頁面。下面我們來學習如何使用CSS3實現這個效果。
/*首先,先設置要飛入的div的起始位置*/ .flying { position: relative; left:-500px; /*將div左移500px,使其超出頁面范圍*/ } /*設置動畫*/ .flying { animation: flyin 1s ease-in-out forwards; } /*定義動畫*/ @keyframes flyin { 0% { left: -500px; opacity: 0; /*開始時div透明度為0*/ } 100% { left: 0; opacity: 1; /*結束時div透明度為1*/ } }
以上代碼中,我們首先給要執行動畫的div設置了一個初始位置(left:-500px),使其在頁面范圍之外,接著我們使用CSS3動畫屬性animation,在1秒內讓div從左側移動到頁面中央,并設置了緩入緩出效果(ease-in-out)和保持動畫結束狀態(forwards)。最后,我們定義了動畫效果的關鍵幀,其中0%的位置是div在起始位置,并且透明度為0,100%的位置是div到達頁面中央,并且透明度為1。如此一來,方才我們就實現了div飛入頁面的效果。
上一篇css3計數器 w3c
下一篇mysql查詢一個表內容