W3.CSS Effects (效果)
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 类添加透明度元素：
实例
<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 类添加的灰度效果的元素：
实例
<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 类添加棕褐色效果的元素：
实例
<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类。
悬停效果
您还可以在悬停/鼠标悬停上添加特殊效果。
实例
<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结合使用，以在悬浮时创建稍微“更浅”的背景色：
实例
<div class="w3-border w3-hover-opacity w3-hover-red">
<p>w3-hover-red with w3-hover-opacity</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例