CSS3过渡创建漂亮的淡化效果
Web设计人员长期以来希望能够更好地控制CSS3在现场创建时所创建的页面。 CSS3中引入的新风格使Web专业人员能够将类似Photoshop的效果添加到他们的页面中。 这包括诸如阴影和发光 ，圆角等属性。 CSS3还引入了动画效果，可用于在网站上创建良好的交互性。
使用CSS3可以添加到网站元素中的一种非常好的视觉效果是使用混合和透明属性的组合来淡入淡出。 这是一种简单且有效的方式，通过创建褪色的区域，让网页更具互动性，这些区域在网站访问者执行某些操作时（例如悬停在该元素上）时会变得焦点集中。
让我们来看看将这种交互式视觉效果添加到网页上的各种元素是多么容易。
让我们改变悬停的不透明度
当客户将鼠标悬停在该元素上时，我们将着眼于如何更改图像的不透明度。 对于这个例子（HTML如下所示）我使用了一个具有greydout类属性的图像。
为了使它变灰，我们将下面的样式规则添加到我们的CSS样式表中：
.greydout {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
}
这些不透明度设置转化为25％。 这意味着图像将显示为正常透明度的1/4。 完全不透明，不透明度为100％，而0％则完全透明。
接下来，当鼠标悬停在图像上时，为了使图像清晰（或更准确地说，变得完全不透明），您可以添加：hover伪类：
.greydout：hover {
-webkit-opacity：1;
-moz-opacity：1;
不透明度：1;
}
您会注意到，对于这些示例，我使用规则的供应商前缀版本来确保这些浏览器的旧版本具有向后兼容性。 虽然这是一个很好的做法，但实际情况是，不透明规则现在得到浏览器的很好支持，并且放弃这些供应商前缀行是非常安全的。 不过，如果您想确保支持较旧的浏览器版本，也没有理由不包含这些前缀。 只要确保遵循公认的最佳做法，即以正常，未加前缀的风格版本结束声明。
如果您在网站上部署了此功能，您会发现这种不透明度调整是非常突然的变化。 首先它是灰色的，然后不是，两者之间没有临时状态。 它就像一个灯开关 - 打开或关闭。 这可能是你想要的，但你也可能想尝试一个更渐进的改变。
要添加一个非常好的效果并逐渐淡化，您需要将转换属性添加到.greydout类中：
.greydout {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
-webkit-transition：所有3s缓解;
-moz-transition：所有3s缓解;
-ms-transition：全部3s缓解;
-o-transition：所有3s缓解;
过渡：所有3s缓解;
}
通过这些代码，变化将逐渐过渡，而不仅仅是突然切换。
再一次，我们在这里使用了许多供应商前缀规则。 Transition不如透明度支持，所以这些前缀确实有意义。
在您规划这些交互时，需要记住的一件事是触摸屏设备没有“悬停”状态，因此使用触摸屏设备（如手机）的任何人都会失去这些效果。 过渡往往会发生，但发生得如此之快以至于无法看到。 如果您将此添加为不错的奖励效果，那很好，但请避免任何需要了解内容的变化。
淡出也是可能的
您不必从褪色的图像开始，您可以使用转场和不透明度从完全不透明的图像中淡出。 使用相同的图像，只使用withfadeout类：
类= “withfadeout”>
就像以前一样，您可以使用：hover选择器更改不透明度：
.withfadeout {
-webkit-transition：所有2s进出;
-moz-transition：全部2s缓和;
-ms-transition：全部2s缓和;
-o-transition：全部2s缓和;
过渡：全部2s缓和;
}
.withfadeout：hover {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
}
在这个例子中，图像将从完全不透明转变为稍微透明 - 与第一个例子相反。
超越图像
您可以将这些视觉过渡和淡入淡出应用于图像，这一点非常好，但您不仅限于仅使用具有这些CSS效果的图像。 您可以轻松制作CSS样式的按钮，单击并保持时会淡入淡出。 您只需使用：active伪类设置不透明度，并将该过渡置于定义该按钮的类上。 点击并按住此按钮查看会发生什么。
可以使任何视觉元素在盘旋或点击时褪色。 在这个例子中，当鼠标悬停时，我改变div的不透明度和文本的颜色。 这里是CSS：
#myDiv {
宽度：280px;
背景颜色：＃557A47;
颜色：#dfdfdf;
填充：10px;
-webkit-transition：所有4s缓解0;
-moz-transition：所有4s缓解0;
-ms-transition：所有4s缓解0;
-o-transition：所有4s缓解0;
过渡：所有4s缓解0;
}
#myDiv：hover {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
颜色：＃000;
}
导航菜单可以从衰落背景颜色中受益
在这个简单的导航菜单中，当我将鼠标悬停在菜单项上时，背景颜色会慢慢地淡入淡出。 这是HTML：
- 家
- CSS3教程
- CSS3属性
这里是CSS：
ul＃sampleNav {list-style：none; }
ul＃sampleNav li {
显示：内联;
向左飘浮;
填充：5px 15px;
保证金：0 5px;
-webkit转换：所有2s线性;
-moz-transition：全2s线性;
-ms-transition：所有2s线性;
-o-transition：全2s线性;
过渡：全2s线性;
}
ul＃sampleNav li a {text-decoration：none; }
ul＃sampleNav li：hover {
背景颜色：＃DAF197;
}
浏览器支持
正如我已经谈过几次，这些样式具有非常好的浏览器支持，所以您应该随时使用它们而不会感到任何不安。 唯一的例外是Internet Explorer的旧版本，但由于微软最近决定终止对11以下所有IE版本的支持，这些旧版本的浏览器越来越成为一个问题 - 实际上，如果旧浏览器不看到这个淡入淡出的过渡，那应该不是什么大问题。 只要您将这些类型的效果限制在愉快的互动中，而不是依靠它们来驱动功能或揭示关键内容，那么不支持效果的旧浏览器就会获得不太愉快的体验，但这些浏览器中的用户甚至不会了解它们之间的差异，特别是如果他们可以正常使用该网站并获取他们所需的信息。
额外的乐趣;交换两个图像
以下是如何将一幅图像淡入另一幅图像的示例。 使用HTML：
而CSS使一个完全透明，而另一个完全不透明，然后过渡交换两个：
.swapMe img {-webkit-transition：全部1s缓和; -moz-transition：全部1s缓和; -ms-transition：全部1s缓和; -o-transition：所有1s缓和; 过渡：所有1s缓和; } .swap1，.swapMe：hover .swap2 {-webkit-opacity：1; -moz-opacity：1; 不透明度：1; } .swapMe：hover .swap1，.swap2 {-webkit-opacity：0; -moz-opacity：0; 不透明度：0; }