CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

梅問題-CSS hover滑入圖片時,加入CSS3動畫特效淡出淡入變換圖片
  Dreamweaver在很早之前,內建就可製作出,二張圖片互換的效果,當滑鼠滑到圖片上方時,就可切換成另一張圖片,但用過的朋友應該都知道,當使用圖片切換的效果時,除了會產生出一堆的javascript碼以外,當今天中途再刪減時,就常會出問題,而這個效果,其實必需要使用到javascript,只需透過CSS就可實現出,兩個img相互變換的效果,同時還可加入CSS3的動畫效果,讓圖片在變換時,產生出淡入淡出的效果。

Step1
#css
.hover {position:relative;}

.hover img {
  position:absolute;
  /* CSS3淡出淡入效果,1秒 */
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.hover img:nth-of-type(2):hover{
  opacity:0; /*滑鼠滑入時,透明度變0*/
}

Step2
由於剛將img設為圖層,因此這時02.jpg會蓋在01.jpg上方,當滑鼠滑入02.jpg將它的透明度設為0後,就會看到01.jpg,是不是既簡單又方便呀!
#html
<div class="hover">
<img src="images/01.jpg" />
<img src="images/02.jpg" />
</div>

Step3
這時看到的圖片是02.jpg。
梅問題-CSS hover滑入圖片時,加入CSS3動畫特效淡出淡入變換圖片
Step4
當滑鼠滑入時,就變成顯示01.jpg。
梅問題-CSS hover滑入圖片時,加入CSS3動畫特效淡出淡入變換圖片
[範例預覽] [範例下載]

相關文章

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

近期講座

更多講座