CSS3中的文字漸入效果十分出色,下面就給大家介紹一下如何使用CSS3來實現(xiàn)文字漸入效果:
/*CSS代碼*/ .fade-in { animation: fadeIn 2s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
我們首先定義了一個CSS類名為"fade-in",然后用"animation"屬性來為其增加了一個動畫效果,時間設置為2秒鐘。在"pre"標簽內的代碼則是定義了一個"keyframes"動畫,將一個不透明度從0漸變至1。
接下來,我們只需要為需要應用這個漸入效果的元素添加這個樣式就行了。例如:
<p class="fade-in">這是一段需要漸入的文本</p>
在頁面載入時,您會看到這個段落在2秒之內逐漸變得更加清晰。
就這樣,我們就可以在不使用任何圖像或JS代碼的情況下,添加一個美麗的文字漸入效果。
上一篇php array含義
下一篇php array反