当CSS3到达场景时，Web设计人员一直希望能够更好地控制他们创建的页面。 CSS3中引入的新样式使网络专业人员能够在其页面中添加类似Photoshop的效果。这包括投影和发光，圆角等属性。 CSS3还引入了类似动画的效果，可用于在网站上创建良好的交互性。
您可以使用CSS3为网站中的元素添加一个非常好的视觉效果，即使用不透明度和过渡属性的组合使它们淡入淡出。这是一种简单且受到良好支持的方式，可以通过创建在网站访问者执行某些操作时聚焦的褪色区域（例如将鼠标悬停在该元素上）来使页面更具交互性。
让我们来看看将这种交互式视觉效果添加到网页上的各种元素是多么容易。
在悬停时更改不透明度
我们将首先了解当客户将鼠标悬停在该元素上时如何更改图像的不透明度。对于此示例（HTML如下所示），我们使用的是具有class属性的图像
greydout。
为了使其变灰，我们将以下样式规则添加到CSS样式表中： .greydout {-webkit-opacity：0.25;-moz-opacity：0.25;不透明度：0.25;}
这些不透明度设置转换为25％。这意味着图像将显示为其正常透明度的1/4。完全不透明，没有透明度是100％，而0％是完全透明的。 接下来，当鼠标悬停在图像上时，为了使图像清晰（或更准确，变得完全不透明），您可以添加 ：徘徊伪类：.greydout：hover {-webkit-opacity：1;-moz-opacity：1;不透明度：1;}
您会注意到，对于这些示例，我们使用规则的供应商前缀版本来确保这些浏览器的旧版本的向后兼容性。虽然这是一个很好的做法，但实际情况是，不透明度规则现在得到了浏览器的良好支持，放弃这些供应商前缀行非常安全。但是，如果要确保支持较旧的浏览器版本，也没有理由不包含这些前缀。请务必遵循公认的最佳做法，即使用正常的，无前缀版本的样式结束声明。 如果您在网站上部署了此功能，您会发现此不透明度调整是一个非常突然的变化。首先，它是灰色的，然后它不是，在这两者之间没有临时状态。它就像一个灯开关 - 开或关。这可能是您想要的，但您可能还想尝试更加渐进的变更。 要添加一个非常好的效果并使这个渐变渐变，你想要添加 过渡
财产到 .greydoutclass：.greydout {-webkit-opacity：0.25;-moz-opacity：0.25;不透明度：0.25;-webkit-transition：所有3s轻松;-moz-transition：所有3s轻松;-ms-transition：全部3s轻松; - 过渡：所有3s轻松;过渡：所有3s轻松;}
