卡卡网

使用 CSS，悬停状态为你提供了一种结合交互式淡入动画的独特方式，你可以将其应用于各种元素，例如图像、按钮和文本。

例子

假设现在你希望使本地电子商店的登录页面上的图像在悬停时具有淡入效果 CSS，你可以决定在悬停时在两秒内将其不透明度从 50% 更改为 100%。

CSS：

img
{
  width: 100%;
  height: 100%;
}
#image-fade-in
{
  opacity: 50%;
}
#image-fade-in:hover
{
  opacity: 100%;
  Transition: opacity 2s;
}

HTML：

<div id="image-fade-in">
  <img src="1.jpg">
</div>

demodownload

默认时，opacity: 50%;，这是半透明状态，悬停时，opacity: 100%;，这是不透明状态，Transition: opacity 2s; 表示过渡时间为2秒。

本实例使用的是图片，该方法同样适用于按钮、文本、背景。

相关文章

• CSS为文本添加fade-in淡入动画效果
• css实现图片fade-in淡入动画效果

标签: 淡入动画效果  css