CSS鼠標(biāo)滑過令行高增高是一種非常有用的效果,可以在網(wǎng)頁設(shè)計(jì)中起到很好的展示作用。
代碼實(shí)現(xiàn)如下:
code { display: block; padding: 10px; background-color: #f5f5f5; border: 1px solid #ccc; font-family: 'Courier New', Courier, monospace; font-size: 14px; } code:hover { height: 200px; transition: height .3s ease-out; }
其中,code
為需要實(shí)現(xiàn)效果的元素,在鼠標(biāo)滑過時(shí),使用:hover
偽類選擇器,將元素高度增加至200px,并添加動(dòng)畫效果。
用CSS實(shí)現(xiàn)鼠標(biāo)滑過令行高增高,可以使網(wǎng)頁更加動(dòng)態(tài),給用戶帶來更好的交互體驗(yàn)。