CSS3是指層疊樣式表第三代,它是前端開發最常用的技術之一,可以實現非常好看的頁面效果。在CSS3中,我們可以通過動畫效果實現一些炫酷的頁面效果,比如下落效果。
代碼如下: div { width: 50px; height: 50px; background-color: red; position: absolute; animation: drop 2s ease-in-out forwards; } @keyframes drop { 0% { top: 0px; } 100% { top: 500px; } }
首先,我們需要一個div標簽來實現下落效果。在CSS中,我們為這個div設置了寬度、高度和背景顏色,并將其定位到頁面的絕對位置。
然后,我們在div標簽中引用了一個動畫效果,即“drop”。該動畫將在2秒內執行,并且會使用“ease-in-out”這個時間函數來實現平滑的動畫效果。
接下來,在“drop”這個動畫中,我們定義了兩個關鍵幀。0%的關鍵幀表示動畫開始時div的位置,也就是在頁面頂部,top值為0px。而100%的關鍵幀則表示動畫結束時div的位置,也就是在頁面底部,top值為500px。
最后,在實際運行時,我們會看到div會在頁面中不斷下落,直到停在頁面底部。這種效果非常好看,可以為頁面增添很多藝術感和動態感。