CSS可以輕松實現點擊文字放大的效果,讓頁面看起來更加引人注目,給用戶更好的閱讀體驗。下面我們來看看如何實現。
//HTML代碼 <p class="enlarge">這是要放大的文字。</p> //CSS代碼 .enlarge { font-size: 16px; } .enlarge:hover { font-size: 20px; cursor: pointer; }
首先,我們在頁面上添加需要放大的文字,這里我們用p標簽來包裹它。然后,在CSS文件里給這個p標簽添加樣式,初始字號為16px。
接下來,使用:hover偽類選擇器,在p標簽被鼠標懸停時改變它的字號,這里我們將字號增大到20px。同時,為了讓鼠標在懸停時顯示一個可以點擊的手型,使用cursor屬性將光標改為手型。
在頁面上,當鼠標懸停在這段文字上時,字號會立即增大,看起來就像是這段文字被放大了一樣。用戶可以在更大的字體下更輕松地閱讀,給予用戶更好的閱讀體驗。
上一篇css實現最大正方形
下一篇css實現淡出淡出效果