製作特效-滑鼠hover效果-物件移動+圖片淡出

姓名:郭哲瑋

就讀學校:崑山科技大學

科系:資訊管理系 研究所

第一步 內容、圖片

將需要用到的圖片、內容用html語法顯示在網頁

html參考程式: 
<div class="ant">
	<img class="animg" src="images/animate.png" />
	<div class="cnt">
		<div class="txt">
		<h3>姓名:郭哲瑋</h3>
		<h3>就讀學校:崑山科技大學</h3>
		<h3>科系:資訊管理系 研究所</h3>
		</div>
	</div>
</div>

藍色字依照自己的設定去寫。

類似像這樣:


會發現圖片超大張，因位現在是圖片原本的尺寸，所以很大張。

CSS設定圖片和div的尺寸

我們可以用兩種方式讓圖片等比例縮小

  1. 直接對圖片設定width或height
  2. 讓圖片隨著外層的div區塊寬度縮放

這裡我們選擇用第2種方式，因為未來放在RWD網頁上才能讓整體隨著螢幕比例縮放。

  1. 設定最外層的div
    • 先將ant這個標籤的div設定 寬 和 高。
    • 將寬(width)設定為20% ，高(height)直接設定為300px。
    • 讓他顯示外框線(border)，方便查看(之後會拿掉)。
    CSS參考程式: 
    .ant{
  width:20%;
  height:300px;
  border:1px solid gray;
}

    左上角會多一個方框，像這樣:



  2. 將圖片(animg)依照左上角的尺寸做縮放
    • 將圖片的高(height)設定為100%
    CSS參考程式: 
    .animg{
	height:100%;
}

    這樣圖片就會依照外層div的高度做縮放

    可以試著將外層的div(ant)的高度(height)變大或變小，可以發現圖片也會跟著變大變小。


第二步：文字與圖片重疊

從上面的範本可以發現圖片跟文字其實是重疊的，只是滑鼠滑入後圖片會消失，然後文字會出現，在沒有做這些效果時，其實他們是重疊的，要怎麼做呢??

這個部分就需要用到之前有講到的 position裡面的relative 和 absolute 這兩個功能。

  1. 將外層的div (ant) 新增功能
    • 用 margin的功能讓整體版面置中
      (此功能只是方便我們觀看版面效果的狀況，非必要做)
    • 新增 position的 relative
    CSS參考程式: 
    .ant{
   width:20%;
   height:300px;
   border:1px solid gray;
   
   ****新增下面這幾行****
   position:relative; 
   margin-left:auto;
   margin-right:auto;
   margin-top:50px;
}
    像這樣:

    你會發現整體版面都在畫面中間，但這是因為用margin的關係。那 position 的部分在這裡是看不出來有效果的，這部分的position主要是讓外層的div(ant)變成父元素，讓裡面的圖片或其他元素以他為父元素做絕對路徑。

  2. 讓圖片、其他元素以外層div(ant)為父元素做絕對路徑
    • 圖片(animg) 和 div(cnt) 加上 position的absolute
    • 讓cnt這個div的寬度為100%，讓他跟著外層的ant這個div寬度縮放
    CSS參考程式:
    圖片: 
    .animg{
      height:100%;
      position:absolute; **新增這一行**
}
    div(cnt): 
     .cnt{
      position:absolute;
	  width:100%;
}
    像這樣:

    你會發現圖片跟文字就可以重疊了


第三步：動畫製作

再來就是要做滑鼠的部分，當滑鼠滑入時最外層的div(ant)時會顯示效果。滑鼠的部分就是用 hover，滑鼠滑入後的效果就要用到之前講的 animation 部分。

animation用法: 
@keyframes demo1 {
	from { width: 100%; }
	to   { width: 120%; }
}
將動畫寫入要動作的那個 div 裡面
圖片移動淡出

圖片移動的部分，因為我們已經設定好絕對路徑，所以只要用動畫讓圖片向右移動即可，那淡出的部分這邊我們使用透明度(opacity)的方式讓圖片消失。

  1. 建立動畫特效
    • 建立一個名叫imgef的動畫特效
    • 開始狀態是圖片不移動(left:0px)，沒有透明度(opacity:1)
    • 結束狀態是圖片向右移動200px(left:200px)，讓圖片完全透明(opacity:0)
      • CSS參考程式: 
      @keyframes imgef {
   from{left:0px; opacity:1;}
   to  {left:200; opacity:0;}
}
  2. 當滑鼠滑到外層div(ant)時會讓圖片(animg)有上面的動畫效果
    • 新增一個css標籤是當滑鼠滑入ant這個div時，讓圖片(animg)執行animation
      • CSS參考程式: 
      .ant:hover .animg{   
    animation-name:imgef;  ---> 動畫名稱
    animation-duration:1s; ---> 幾秒要跑完動畫
    animation-iteration-count:1; ---> 要跑的次數
    animation-fill-mode:forwards; ---> 動畫跑完後要維持的模樣
}
成功後會像這樣:

當滑鼠移到黑框時，圖片就會淡出，離開後就會恢復


文字淡入
我們的文字一開始是放在名叫 txt 的div區塊裡面，所以我們要移動的是整個div區塊，當然如果要移動的物件比較少就可以像圖片那樣，直接給一個clss後直接放動畫，但我們這次要用移動的是好幾行文字，他們分別都用h3的標題效果，我們總不可能一個一個對h3下class後再放動畫，所以我們直接將他們包在同一個div區塊後，效果都放在div區塊上。

文字這部分是當滑鼠滑入後才會出現，代表他一開始就不會出現，所以我們要先讓文字的部分一開始是不會顯示的。

  1. 將txt這個div不要出現在網頁上
    • 將文字區塊放上絕對路徑(absolute)
    • 讓這個區塊完成透明(opacity)
    • 讓區塊有內部留白(padding)，字才不會跟框線靠太近
      • CSS參考程式: 
      .txt{
	position:absolute;
	opacity:0;
	padding:10px;
}
      這樣文字一開始就不會出現在網頁上
  2. 建立動畫特效
    • 建立一個名叫txtef的動畫特效
    • 開始狀態 區塊位置要在原始位置的左邊(left:-200px)，要完全透明(opacity:0)
    • 結束狀態 區塊位置要回到原始位置(left:0px)，不要有透明(opacity:1)
      • CSS參考程式: 
      @keyframes txtef {
   from{left:-200px; opacity:0;}
   to  {left:0px; opacity:1;}
}
  3. 當滑鼠滑到外層div(ant)時會讓txt這個div有動畫效果
    • 新增一個css標籤是當滑鼠滑入ant這個div時，讓txt這個div區塊執行animation
      • CSS參考程式: 
      .ant:hover .txt{   
      animation-name:txtef; ---> 動畫名稱
      animation-duration:1s; ---> 幾秒要跑完動畫
      animation-iteration-count:1; ---> 要跑的次數
      animation-fill-mode:forwards; ---> 動畫跑完後要維持的模樣
}
成功後會像這樣:

當滑鼠移到黑框時，文字就會出現

外框線展開

在第一步驟寫html的部分時，我們在txt的div外還有在包一層名叫cnt的div，除了要做position的絕對路徑外，另一個用途就是外框線了，從範本來看感覺是線條慢慢出現，其實是讓cnt這個div的高度從0px慢慢變大。所以他不是線條慢慢出現，而是讓整個div的高度慢慢變大的效果，線條則是在滑鼠滑入後一起出現。

  1. 建立動畫特效
    • 建立一個名叫cntef的動畫特效
    • 開始狀態 區塊的高度(height)為0
    • 結束狀態 區塊的高度(height)為100%
      • CSS參考程式: 
       @keyframes cntef{
      from{height:0px;}
      to  {height:100%;}
   }
  2. 當滑鼠滑到外層div(ant)時會讓圖片(animg)有上面的動畫效果
    • 新增一個css標籤是當滑鼠滑入ant這個div時，讓txt這個div區塊執行animation
      • CSS參考程式: 
      .ant:hover .cnt{   
      animation-name:cntef; ---> 動畫名稱
      animation-duration:1s; ---> 幾秒要跑完動畫
      animation-iteration-count:1; ---> 要跑的次數
      animation-fill-mode:forwards; ---> 動畫跑完後要維持的模樣
	border:5px solid black; --->顯示 5px寬的黑色外框線
}
成功後會像這樣:

當滑鼠移到黑框時，會有框線展開效果

最後再把一開始ant這個div裡的外框線(border)拿掉，就完成了