长期以来，网站设计人员一直希望对CSS出现更多可以控制页面效果的属性。随着CSS3的发布，CSS3引入的新样式使Web专业人员可以向网页添加类似Photoshop的效果。这包括阴影和发光，圆角等属性。CSS3还引入了类似于动画的效果，可用于在网站上创建良好的交互性效果。
您可以使用CSS3向网站页面中添加一些非常不错的视觉效果，是使用不透明度和过渡属性的组合使它们淡入和淡出。这是一种简单且得到良好支持的方法，它通过创建褪色区域来使页面更具交互性，这些褪色区域在站点访问者执行某项操作（例如将鼠标悬停在该元素上）时便会触发。
下面就让我们看一下将这种交互的视觉效果添加到网页上各种元素有多么容易。
手表悬停时更改不透明度。我们将首先研究当客户将鼠标悬停在该元素上时如何更改图像的不透明度。对于此示例（下面显示了HTML），我们使用的图像的类属性为 greydout。
为了使其变灰，我们在CSS样式表中添加以下样式规则：这些不透明度设置转换为25％。这意味着图像将显示为其正常透明度的1/4。没有透明度的完全不透明的将是100％，而完全透明的是0％。
接下来，要使鼠标悬停在图像上方时使图像清晰（或更准确地说，变得完全不透明）。您将注意到，对于这些示例，我们使用规则的供应商前缀版本来确保这些浏览器的较早版本的向后兼容性。尽管这是一个好习惯，但现实情况是浏览器现在已经很好地支持了不透明度规则，并且去掉这些供应商前缀的行是非常安全的。但是，如果要确保支持较旧的浏览器版本，也没有理由不包含这些前缀。只要确保遵循公认的最佳做法，即以样式的规范写法，无前缀版本结束声明。
如果将其部署在站点上，则会看到此不透明度调整是非常突然的更改。首先，它是灰色的，然后不是，这两个之间没有过渡状态。就像电灯开关一样-开或关。这可能是您想要的，但是您可能还想尝试更渐进的更改。
领创时代-青岛网站设计专家