104學習精靈

網頁動畫
網頁動畫
關注
邀請朋友
邀請朋友

Line

Facebook

複製連結

取消
關於教室
關注人數 0 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
學習主持人
持續分享知識，
有機會成為官方教室主持人
教室標籤
  • 網頁動畫
    • 關於教室
    關注人數 0 人
    104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
    學習主持人
    持續分享知識，
    有機會成為官方教室主持人
    教室標籤
  • 網頁動畫
    • Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
    我要分享
    我要提問

    網頁動畫 學習推薦

    全部
    影片
    文章
    Hahow 好學校
    關注
    Hahow 小蛙編輯

    創作內容編輯

    2022/08/29

    翻滾吧蔥油餅！簡單 SVG 動畫製作_下集：讓場景元件動起來
    本篇文章接續上集，要帶大家簡單做出好玩的 SVG 網頁動畫，讓蔥油餅翻滾！怎麼讓場景元件動起來，一步步帶你動手做。
    本文翻自 [週四寫程式系列] 來做SVG動畫讓蔥油餅翻滾吧!，若是對文章內容有疑問，或是想要老闆手把手帶你飛，都可以觀看影片詳細內容。
    在上集中，老闆帶大家從發想素材、將素材引入網頁，到製作場景進出的動畫。接下來我們將要賦予場景中的每個元件生命。
    本篇文章會談到：
    本篇文章中，老闆會帶大家完成蔥油餅小島中角色與物件的動畫，也會提示大家每個部份需要注意的地方，以下動畫的設定數值都都只是參考，開發時大家都能試試看不同的數值。
    實際應用﹔讓場景中的元件動起來
    怎麼讓素材動起來？
    一、驚嘆號
    首先我們從驚嘆號下手，老闆讓驚嘆號分布在場景的各處，用意是要提示使用者這邊有驚喜，引導使用者靠近這個區塊。為了增加提示效果，我們利用左右晃動的動畫效果，固定時間後會再撥放。
    這邊使用了新的 css 屬性 animation ，需要搭配 @keyframes 使用，在 keyframes 用百分比去註記不同時間該顯示的樣式，透過 animation 定義動畫總時間，這也代表這個 keyframes 可以提供給不同元件使用，使用的元件賦予不同的時間等屬性，就是一個全新的樣貌。
    要注意元件會以左上角為旋轉中心點，適時加上 transform-origin, transform-box 讓動畫更加合理。
    詳見原文>
    翻滾吧蔥油餅！簡單 SVG 動畫製作_下集：讓場景元件動起來
    hahow.in
    翻滾吧蔥油餅！簡單 SVG 動畫製作（下集）：讓場景元件動起來
    1 0 436 1
    學習精靈

    09/22 00:00

    youtube.com
    Flash網頁動畫--商品大小圖無限循環展示技巧及網頁檔上傳網站教學
    10 5
    學習精靈

    06/29 00:00

    youtube.com
    【網知系列 EP06】網頁動畫概念，十分鐘介紹
    1 0

    推薦給你

    職場必備英文：實力、戰力，生存力
    關注
    104學習精靈

    產品

    1小時前

    40個跟自然生態有關的英文單字！永續發展、全球暖化、二氧化碳
    這段摘要將探討自然與生態學的40個關鍵英文詞彙，涵蓋環保、永續發展等單字，對保護地球和生物多樣性有重要意義。快來一起學學吧！
    1. Nature - 自然
    2. Ecology - 生態學
    3. Environment - 環境
    4. Wildlife - 野生動物
    5. Habitat - 棲息地
    6. Conservation - 保育
    7. Biodiversity - 生物多樣性
    8. Ecosystem - 生態系統
    9. Sustainability - 可持續性
    10. Forest - 森林
    11. Ocean - 海洋
    12. River - 河流
    13. Lake - 湖泊
    14. Mountain - 山
    15. Desert - 沙漠
    16. Wetland - 濕地
    17. Rainforest - 雨林
    18. Coral reef - 珊瑚礁
    19. Conservationist - 保育人士
    20. Naturalist - 自然學家
    21. Endangered species - 瀕危物種
    22. Climate change - 氣候變化
    23. Pollution - 污染
    24. Deforestation - 森林砍伐
    25. Global warming - 全球暖化
    26. Renewable energy - 可再生能源
    27. Recycling - 回收利用
    28. Sustainable development - 永續發展
    29. Greenhouse gases - 溫室氣體
    30. Carbon footprint - 碳足跡
    31. Habitat destruction - 棲息地破壞
    32. Conservation area - 保護區
    33. Organic farming - 有機農業
    34. Ecological footprint - 生態足跡
    35. Wilderness - 荒野
    36. Ecotourism - 生態旅遊
    37. Wildlife sanctuary - 野生動物保護區
    38. Carbon dioxide - 二氧化碳
    39. Erosion - 侵蝕
    40. Green space - 綠地
    如果喜歡這篇文章，按下關注共學~ 一起學英文 ( •̀ ω •́ )✧
    0 0 28 0
    你可能感興趣的教室