讓網頁看起來更有活力,是很多網站設計師的目標。其中一個方法就是使用一些簡單的CSS技巧,比如字體飛入效果。這個效果可以讓你的標題或者主要內容在頁面剛加載時就能夠非常引人注目。
h1 { font-size: 0; animation: fly-in 0.6s ease-out forwards; } @keyframes fly-in { 0% { transform: translateY(-100%); font-size: 4em; } 100% { transform: translateY(0%); font-size: 2em; } }
上面的代碼使用了CSS的關鍵幀動畫和過渡效果。其中h1是我們要使用字體飛入效果的元素,我們先將它的字體大小設置為0,然后定義了一個名為fly-in的關鍵幀動畫。
這個動畫從0%到100%先是將h1元素從頁面的頂部移動到中央(translateY(-100%)),并且將字體大小從4em變成2em。完成移動后,它會緩慢地從中央回到原來的位置(translateY(0%)),在這個過程中字體大小一直是2em。
最后,為了讓這些樣式生效,我們需要將動畫的名稱fly-in添加到h1元素的樣式中。我們還指定了一個轉換時間為0.6秒,本動畫的速度為“ease-out”,這樣就能讓動畫效果更加平滑。
有了這段代碼,現在您可以讓h1元素在頁面加載時以一個引人注目的方式出現了。