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 类添加透明度元素:

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号