CSS 是網頁設計的重要組成部分,它可以讓網頁更加美觀和易于閱讀。其中一種應用是當鼠標指在網頁上時,使其中的文本或圖像變得更加明亮和突出。下面是一個簡單的實現方法:
/* 定義一個新的 CSS 類 */ .brighten { filter: brightness(150%); } /* 當鼠標指上時將元素加上該類 */ :hover { cursor: pointer; transition: filter .5s ease-in-out; /* 使用變換函數來使效果更加平滑 */ filter: brightness(120%); }
以上代碼的第一個部分定義了一個名為brighten
的類,其中包含一個 filter 屬性,用于提高元素的亮度。第二個部分使用 :hover 偽類來給元素設置鼠標指上時的效果。此時 filter 屬性會被修改為一個更亮的值,并且在 0.5 秒內過渡到這個新狀態。
實際應用時,可以將該類應用于任何需要突出顯示的元素,比如按鈕、鏈接或圖片等。