閱讀(2.3k) 書簽贊(0) 我要糾錯

W3.CSS Effects (效果)

2020-12-08 16:11 更新

W3.CSS提供以下效果類：

類	定義
w3-opacity	為元素添加不透明度/透明度（不透明度：0.6）
w3-opacity-min	為元素添加不透明度/透明度（不透明度：0.75）
w3-opacity-max	為元素添加不透明度/透明度（不透明度：0.25）
w3-grayscale	向元素添加灰度效果（灰度：75％）
w3-grayscale-min	向元素添加灰度效果（灰度：50％）
w3-grayscale-max	向元素添加灰度效果（灰度：100％）
w3-sepia	為元素添加深褐色效果（深褐色：75％）
w3-sepia-min	為元素添加深褐色效果（深褐色：50％）
w3-sepia-max	為元素添加深褐色效果（深褐色：100％）
w3-hover-opacity	為懸停時的元素添加透明度（不透明度：0.6）
w3-hover-grayscale	向懸停時的元素添加灰度效果（灰度：100％）
w3-hover-sepia	在懸停時為元素添加棕褐色效果

不透明度

w3-opacity 類添加透明度元素：

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

灰階

w3-grayscale 類添加的灰度效果的元素：

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

注意： IE 11和更早版本不支持w3-grayscale類。

棕褐色

w3-sepia 類添加棕褐色效果的元素：

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

注意： IE 11和更早版本不支持w3-sepia類。

懸停效果

您還可以在懸停/鼠標懸停上添加特殊效果。

實例

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

懸停不透明度顏色

您還可以將任何w3-hover-color類與w3-hover-opacity結合使用，以在懸浮時創(chuàng)建稍微“更淺”的背景色：

實例

<p>w3-hover-red with w3-hover-opacity</p>

</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

以上內容是否對您有幫助：

← W3.CSS Animations (動畫)

W3.CSS Bars (欄) →

寫筆記

我要補充

W3.CSS Effects (效果)

不透明度

實例

灰階

實例

注意： IE 11和更早版本不支持w3-grayscale類。

棕褐色

實例

注意： IE 11和更早版本不支持w3-sepia類。

懸停效果

實例

懸停不透明度顏色

實例

推薦文章

推薦教程

推薦課程

注意： IE 11和更早版本不支持w3-grayscale類。

注意： IE 11和更早版本不支持w3-sepia類。