在網(wǎng)頁(yè)設(shè)計(jì)中,經(jīng)常需要使用關(guān)閉按鈕或者關(guān)閉圖標(biāo)。而 CSS3 提供了許多方法來(lái)制作漂亮的關(guān)閉按鈕或圖標(biāo)。下面就一起來(lái)學(xué)習(xí) CSS3 制作關(guān)閉圖標(biāo)的方法。
/* 畫(huà)一個(gè) X */ .close { width: 20px; height: 20px; background-color: #ccc; position: relative; } .close::before, .close::after { content: ""; position: absolute; width: 2px; height: 10px; background-color: #fff; top: 5px; left: 9px; } .close::before { transform: rotate(45deg); } .close::after { transform: rotate(-45deg); }
上面的代碼使用了偽元素(::before 和 ::after)來(lái)畫(huà)出交叉的線(xiàn)條,以形成一個(gè) X 形。其中,使用了 transform 屬性,將線(xiàn)條旋轉(zhuǎn)了 45 度和 -45 度,以達(dá)到交叉的效果。
還有一種方法是使用 Unicode 符號(hào)來(lái)制作關(guān)閉圖標(biāo)。下面的代碼就是使用 Unicode 符號(hào) '\00D7' 來(lái)制作關(guān)閉圖標(biāo)。
.close { font-size: 25px; cursor: pointer; } .close::before { content: '\00D7'; }
上面的代碼并不需要特意去設(shè)置寬高等屬性,直接使用 font-size 屬性就能讓關(guān)閉圖標(biāo)達(dá)到合適的大小。同時(shí),也使用了 cursor 屬性,使鼠標(biāo)放在關(guān)閉圖標(biāo)上時(shí)出現(xiàn)手形指示器,增強(qiáng)了交互性。
通過(guò)以上兩種方法,就能在網(wǎng)頁(yè)設(shè)計(jì)中輕松制作出漂亮的關(guān)閉圖標(biāo)。大家可以根據(jù)自己的需要選擇合適的方法來(lái)實(shí)現(xiàn)。同時(shí),還可以通過(guò)輔助工具如圖標(biāo)字體庫(kù),更迅速便捷地實(shí)現(xiàn)網(wǎng)頁(yè)元素的設(shè)計(jì)。