卡卡網(wǎng)

使用 CSS，懸停狀態(tài)為你提供了一種結(jié)合交互式淡入動(dòng)畫的獨(dú)特方式，你可以將其應(yīng)用于各種元素，例如圖像、按鈕和文本。

例子

假設(shè)現(xiàn)在你希望使本地電子商店的登錄頁面上的圖像在懸停時(shí)具有淡入效果 CSS，你可以決定在懸停時(shí)在兩秒內(nèi)將其不透明度從 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

默認(rèn)時(shí)，opacity: 50%;，這是半透明狀態(tài)，懸停時(shí)，opacity: 100%;，這是不透明狀態(tài)，Transition: opacity 2s; 表示過渡時(shí)間為2秒。

本實(shí)例使用的是圖片，該方法同樣適用于按鈕、文本、背景。

相關(guān)文章

• CSS為文本添加fade-in淡入動(dòng)畫效果
• css實(shí)現(xiàn)圖片fade-in淡入動(dòng)畫效果

標(biāo)簽: 淡入動(dòng)畫效果  css