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 459 1

    熱門精選

    104學習精靈

    產品

    06/26 13:22

    【PPA開幕慶】活動期間首購單筆滿千以上送100元Line Points點數
    活動期間：2024/7/9 11:00- 2024/8/5 23:59
    活動說明：活動期間首次於104課程中心付費購買「PPA (PressPlay Academy) 上架課程」，單筆滿$1,000以上 ( 若有使用任何折扣碼優惠，結帳金額於扣除優惠後須超過$1,000以上，且不累計贈送。) 即可獲贈100元Line Points點數回饋。
    活動注意事項：
    1. 獲贈資格須符合下列說明：
    (A) 首購意指：載本活動之前未曾在104課程中心購買「PPA (PressPlay Academy) 上架課程」，於活動期間首次完成消費購買「PPA (PressPlay Academy) 上架課程」。
    (B) 購買者必須於104課程中心系統完成付費紀錄。( 特別提醒： 購買者於PPA (PressPlay Academy) 官網線上消費不包含在此次活動資格 )
    (C) 訂單成立且完成付款時間皆須於2024年8月5日23:59前，並於7天內完成課程兌換，始符合獲贈點數回饋的資格；最後獲贈者將公告於本活動網站，中間姓名會隱藏。
    (D) 單帳號僅有乙次贈送資格，符合上述資格者，因點數作業時間，您的回饋點數最晚將於2024/9/30前寄送至您購買時填寫的e-mail電子郵件信箱。
    2. 本次贈送的100元Line Points點數，點數發送後請於規範時間內完成兌換，點數兌換後於180天內須使用完畢，逾期失效。
    3. 104課程中心保有最終修改、變更、活動解釋及取消本活動之權利。
    4. 104課程中心。購買課程相關Q&A：可參考下連結頁面的「購買課程」( https://nabi.104.com.tw/qna )
    5. 如您有任何問題，歡迎來信nabiservice@104.com.tw
    【PPA開幕慶】活動期間首購單筆滿千以上送100元Line Points點數
    0 0 21991 3
    學習精靈

    05/30 00:00

    youtube.com
    品牌廣告│天韻 網頁動畫設計
    2 0
    學習精靈

    09/17 00:00

    youtube.com
    自製網頁動畫設計
    0 0

    推薦給你

    廣告一投就中！
    關注
    知識貓星球

    喵星人

    10小時前

    投放Google關鍵字廣告的五大優勢！
    Google關鍵字廣告可以幫助企業提高銷售、增加品牌曝光和精確觸達目標客戶。投放Google關鍵字廣告（Google Ads）的五大理由如下：
    1. 高效目標客戶：Google關鍵字廣告可以讓你精確鎖定正在搜索與你的產品或服務相關的潛在客戶。這意味著你的廣告會出現在那些已經對你的產品有興趣的人的面前，從而提高轉化率。
    2. 靈活的預算控制：你可以根據自己的預算靈活設置每日和每次點擊的費用。無論是小企業還是大型公司，都可以根據需要調整廣告支出，以確保不超出預算。
    3. 即時效果追踪與優化：Google Ads提供詳細的報告和分析工具，讓你能夠即時追踪廣告的效果。這些數據可以幫助你了解哪些關鍵字和廣告文案最有效，並進行及時的優化，以提高投資回報率。
    4. 增加品牌知名度：即使用戶不點擊你的廣告，只要他們在搜索結果頁面上看到你的品牌名稱和信息，就能增加品牌的曝光度和知名度，這對於長期的品牌建設非常有利。
    5. 覆蓋廣泛且多樣化的受眾：Google擁有全球最大的搜索引擎，能夠覆蓋世界各地的廣大受眾。無論你是本地企業還是國際公司，都可以通過Google Ads將你的產品或服務展示給不同地域和語言的用戶。
    0 0 130 0
    你可能感興趣的教室