W3.CSS 特效
Normal
w3-opacity
w3-grayscale-max
w3-sepia-max
W3.CSS 效果类
W3.CSS提供了以下效果类:
| 类 | 定义 |
|---|---|
| w3-opacity | 为元素添加不透明度/透明度 (opacity: 0.6) |
| w3-opacity-min | 为元素添加不透明度/透明度 (opacity: 0.75) |
| w3-opacity-max | 为元素添加不透明度/透明度 (opacity: 0.25) |
| w3-grayscale | 给元素添加灰度效果 (grayscale: 75%) |
| w3-grayscale-min | 给元素添加灰度效果 (grayscale: 50%) |
| w3-grayscale-max | 给元素添加灰度效果 (grayscale: 100%) |
| w3-sepia | 为元素添加棕褐色效果 (sepia: 75%) |
| w3-sepia-min | 为元素添加棕褐色效果 (sepia: 50%) |
| w3-sepia-max | 为元素添加棕褐色效果 (sepia: 100%) |
| w3-hover-opacity | 悬停时为元素添加透明度 (opacity: 0.6) |
| w3-hover-grayscale | 悬停时为元素添加灰度效果 (grayscale: 100%) |
| w3-hover-sepia | 悬停时为元素添加棕褐色效果 |
不透明度
w3-opacity 类为元素添加透明度:
Normal
w3-opacity-min
w3-opacity
w3-opacity-max
实例
<img src="image.jpg" class="w3-opacity-min">
<img src="image.jpg" class="w3-opacity">
<img src="image.jpg" class="w3-opacity-max">
亲自试一试 »
灰度
w3-grayscale 类为元素添加灰度效果:
Normal
w3-grayscale-min
w3-grayscale
w3-grayscale-max
实例
<img src="image.jpg" class="w3-grayscale-min">
<img src="image.jpg" class="w3-grayscale">
<img src="image.jpg" class="w3-grayscale-max">
亲自试一试 »
注释: IE 11 及更早版本不支持 w3-grayscale 类。
棕褐色
w3-sepia 类为元素添加棕褐色效果:
Normal
w3-sepia-min
w3-sepia
w3-sepia-max
实例
<img src="image.jpg" class="w3-sepia-min">
<img src="image.jpg" class="w3-sepia">
<img src="image.jpg" class="w3-sepia-max">
亲自试一试 »
注释: IE 11 及更早版本不支持 w3-sepia 类。
悬停效果
您还可以在悬停/鼠标悬停时添加特殊效果。
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
实例
<img src="image.jpg" class="w3-hover-opacity">
<img src="image.jpg" class="w3-hover-grayscale">
<img src="image.jpg" class="w3-hover-sepia">
亲自试一试 »
悬停不透明颜色
您还可以将任何 w3-hover-color 类与 w3-hover-opacity 结合使用，以在悬停时创建稍微"更亮"的背景颜色:
w3-hover-red
w3-hover-red with w3-hover-opacity
实例
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red with w3-hover-opacity</p>
</div>
亲自试一试 »
