大家好~今天我們要來講的是如何在網頁中插入圖片及讓圖片動起來~

在網頁中插入圖片

我們可以使用<img>標籤來插入圖片。
<img src="url_to_your_image.jpg" alt="Description of the image">
src 後面接的是圖片的url或文件路徑
alt 是關於圖片的描述
圖片中的URL分為絕對路徑與相對路徑
絕對路徑你只需要貼上完整路徑就完成了。
<img src="https://example.com/images/my_image.jpg" alt="My Image">

而相對路徑你必須先判斷它位於哪個目錄內，
如果圖片是跟HTML同目錄，可以直接寫圖片檔名即可。
<img src="my_image.jpg" alt="My Image">
如果不同，就需要寫出他位於哪個資料夾內。
<img src="images/my_image.jpg" alt="My Image">
表示圖片位於image資料夾內

用css做簡易動畫

接下來我們要介紹的是css裡面的@keyframes。
@keyframes 是 CSS 中一個用來創建動畫的規則，可以用他來定義隨著時間變化的動畫樣式。
這是他的基本用法:

@keyframes Movebear {
  0% {
    /*在動畫開始時 */
  }
  50% {
    /*在動畫進行到一半時 */
  }
  100% {
    /*在動畫結束時 */
  }
}

只要定義了@keyframes，就可以通過CSS的animation屬性來應用這個動畫:

.bear{
    width:200px;
    height:200px;
    border-radius: 100px;
    animation-name: Movebear;   
    animation-duration: 5s;    
    animation-delay: 0s; 
    animation-iteration-count: infinite; 
}

animation-name: Movebear; 代表在@keyframes定義的動畫名稱
animation-duration: 5s; 代表這個動畫的持續時間
animation-delay: 0s; 代表動畫結束的延遲時間
animation-iteration-count: infinite; 代表設定動畫重複播放次數的屬性

以下是我們的demo時間~

今天就介紹到這邊~我們明天見~