🖍️
CSS 排版及動畫效果
  • CSS 排版及動畫效果
  • 1. 簡介
    • 1.1 講者簡介
    • 1.2 課程簡介
    • 1.3 開發工具簡介
  • 2. 棋盤式排版模式 Grid
    • 2.1 基本觀念及術語
    • 2.2 Grid 排版 - Container
    • 2.3 Grid 排版 - Items
  • 3. 多欄排版模式 Column
  • 4. 轉場效果 transition
    • 4.1 第一個 transition
    • 4.2 屬性 transition-property
    • 4.3 期間 transition-duration
    • 4.4 漸變函式 transition-timing-function
    • 4.5 延遲 transition-delay
    • 4.6 transition 縮寫
    • 4.7 練習
  • 5. 動畫效果 animation
    • 5.1 第一個 animation
    • 5.2 關於 keyframes
    • 5.3 同個元素套用多個 animation
    • 5.4 次數 animation-iteration-count
    • 5.5 方向 animation-direction
    • 5.6 延遲 animation-delay
    • 5.7 填滿模式 animation-fill-mode
    • 5.8 播放狀態 animation-play-state
    • 5.9 漸變函式 animation-timing-function
    • 5.10 animation 縮寫
    • 5.11 補充:動畫效果事件(Animation Event)
    • 5.12 練習
  • 6. 作業
  • 7. 第三方動畫效果套件
    • 7.1 Animate.css
    • 7.2 AOS
    • 7.3 CSS Loader
  • 8. 大量練習
  • 9. 其它及參考資料
Powered by GitBook
On this page
  • 練習 1: cubic-bezier
  • 練習 2:左右擺動
  • 練習 3:Sprite 效果
  1. 5. 動畫效果 animation

5.12 練習

Previous5.11 補充:動畫效果事件(Animation Event)Next6. 作業

Last updated 5 years ago

練習 1: cubic-bezier

透過,拉一個效果,如下結果示意。

指定檔名:cubic_bezier.html

提供 html:

<div class="outer_block">
  <div class="block">div 區塊</div>
</div>

<button type="button" class="trigger">觸發</button>

提供部份 css:

* {
  box-sizing: border-box;
}
body{
  margin: 0;
}
div.outer_block{
  width: 500px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  margin-left: 100px;
  margin-top: 100px;
}
div.block{
  border: 1px solid blue;
  display: inline-block;
  width: 100px;
  height: 98px;
  position: absolute;
  left: 0;
  top: 0;
}

提供 js:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function(){
  
    // 「觸發」按鈕點擊
    $("button.trigger").on("click", function(){
      
      // move 樣式的切換(點擊一次加上 move 樣式,再點擊則移除)
      $("div.block").toggleClass("move");
      
    });
    
  });
</script>

結果示意:

參考作法:

練習 2:左右擺動

指定檔名:button_wiggle.html

@keyframes 說明:

  • 動畫效果名稱為 wiggle

  • 0% 時的位置: left: 0;

  • 10% 時的位置: left: -10px;

  • 20% 時的位置: left: 0;

  • 30% 時的位置: left: 10px;

  • 40% 時的位置: left: 0;

  • 50% 時的位置: left: -10px;

  • 60% 時的位置: left: 0;

  • 70% 時的位置: left: 10px;

  • 100% 時的位置: left: 0;

其它說明:

  • 動畫效果執行一次( animation-duration )的時間為 1s

  • 漸變函式( animation-timing-function )設定為 linear

  • input.input_text 元素的 position 設定為 relative

提供 html:

<div class="fixed_block">
  <input type="text" class="input_text" placeholder="text 欄位">

  <br>

  <button type="button" class="trigger">資料送出</button>
</div>

提供部份 css:

* {
  box-sizing: border-box;
}
body{
  margin: 0;
}
div.fixed_block{
  position: fixed;
  display: inline-block;
  border: 1px solid gray;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input.input_text{
  border: 1px solid red;
  position: relative;
}

提供 js(放在 </body> 結束標籤之前):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(function(){
    
    // 點擊(click)事件
    $("button.trigger").on("click", function(){
      
      // 加上指定的樣式
      $("input.input_text").addClass("-wiggle");
      
      // 經過指定毫秒後,移除 -wiggle 樣式
      setTimeout(function(){
        $("input.input_text").removeClass("-wiggle");
      }, 1000); // 單位是毫秒
      
    });
    
    
  });
</script>

結果示意:

參考作法:

練習 3:Sprite 效果

指定檔名:animation_sprite.html

說明:

  • 此圖的寬高分別是 850px、170px。

  • animation-timing-function 使用 steps 函式。

  • 執行方向:做一個寬高都是 170px 的 div,搭配 animation 動畫效果。

提供 html:

<!-- 用 CSS 背景圖 方式來做 -->
<div class="sprite_block"></div>

<!-- 或 用 img 標籤來做 -->
<div class="sprite_block"><img src="https://alldata.sgp1.digitaloceanspaces.com/images/sprite_img_new.png"></div>

結果示意:

參考作法:

背景圖做法:

1、算出每跳一次,要多少百分比 → 25%。

2、steps 要 5 個間隔,就 25% * 5 = 125%。

img 標籤做法:

圖片路徑:

這個網站
https://alldata.sgp1.digitaloceanspaces.com/images/sprite_img_new.png