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