104學習精靈
SVG
SVG
關注
邀請朋友 
Facebook
Line
複製連結
Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
我要分享
我要提問
SVG 學習推薦
全部
影片
文章
翻滾吧蔥油餅！簡單 SVG 動畫製作_下集：讓場景元件動起來
本篇文章接續上集，要帶大家簡單做出好玩的 SVG 網頁動畫，讓蔥油餅翻滾！怎麼讓場景元件動起來，一步步帶你動手做。
本文翻自 [週四寫程式系列] 來做SVG動畫讓蔥油餅翻滾吧!，若是對文章內容有疑問，或是想要老闆手把手帶你飛，都可以觀看影片詳細內容。
在上集中，老闆帶大家從發想素材、將素材引入網頁，到製作場景進出的動畫。接下來我們將要賦予場景中的每個元件生命。
本篇文章會談到：
本篇文章中，老闆會帶大家完成蔥油餅小島中角色與物件的動畫，也會提示大家每個部份需要注意的地方，以下動畫的設定數值都都只是參考，開發時大家都能試試看不同的數值。
實際應用﹔讓場景中的元件動起來
怎麼讓素材動起來？
一、驚嘆號
首先我們從驚嘆號下手，老闆讓驚嘆號分布在場景的各處，用意是要提示使用者這邊有驚喜，引導使用者靠近這個區塊。為了增加提示效果，我們利用左右晃動的動畫效果，固定時間後會再撥放。
這邊使用了新的 css 屬性 animation ，需要搭配 @keyframes 使用，在 keyframes 用百分比去註記不同時間該顯示的樣式，透過 animation 定義動畫總時間，這也代表這個 keyframes 可以提供給不同元件使用，使用的元件賦予不同的時間等屬性，就是一個全新的樣貌。
要注意元件會以左上角為旋轉中心點，適時加上 transform-origin, transform-box 讓動畫更加合理。
詳見原文>
1
0
484 1
拍手
留言
分享
Line
複製連結
收藏
熱門精選
【最新】2024年11月AI課程熱門排行榜TOP 10：最受歡迎的AI學習課程推薦
從AI基礎知識到應用，市面上提供了各種AI學習課程：AI線上課程、AI實體課程，無論您是初學者還是專業人士，都可以找到適合自己的AI課程。本文將為您揭曉2024年11月最受歡迎的AI課程排行榜，幫助您輕鬆找到優質的AI學習資源，快速掌握AI技能。
本篇透過從104課程中心的用戶學習大數據，整理出大家都在搜尋的TOP 10 熱門課程；可透過排行榜，找到你所需的學習內容，增進職場的職能成長，加強自我競爭力，打造你的職涯藍圖！
第1名。ChatGPT x Excel | 職場必學商務數據分析術
講師將以系統化教學法，教授數據分析常用情境，搭上火紅 ChatGPT ，步驟式實戰，能隨學即用，讓你知道如何在工作中運用所學到的技能！
第2名。AI資料科學家【 聽課全系列 】
「基礎思維」AI資料科學的新朋友，必定要了解一下人工智慧的歷史里程碑與事件，從這裡出發，您也能與不熟悉這個領域的朋友侃侃而談地分享您所學領域的轉變與趨勢，而初學者免不了學習的十字路口，不知道該從哪個部分開始學習AI，這裡也會給您適合適當的指引。常常被混的網頁爬蟲與ETL您真的認識並了解嗎？聽聽看TibaMe的講師們怎麼說吧！
第3名。生成式AI應用速成：商業溝通師-數位行銷課(12/21開課)
🔴報名截止日：2024/12/8🔴
你可以學到
🌟AI 行銷創作零基礎也能秒上手｜不需任何行銷經驗，快速學會生成式 AI 工具，輕鬆打造吸睛行銷素材。
🌟行銷策略效果爆發式成長｜ 有效運用 AI 提升執行力，讓行銷效率飆升、策略效果倍增。
🌟精準鎖定目標受眾，打中痛點｜ 用 AI 技術解析消費者行為，精準掌握市場趨勢，一次抓住受眾需求。
🌟品牌形象全面升級｜ AI 創造獨特行銷風格，讓品牌成為目光焦點，迅速在市場中脫穎而出。
第4名。2小時輕鬆學AI | 基礎觀念與應用
從資料科學的基礎觀念談起、商業智慧、資料探勘、影像辨識等技術應用，最後再討論企業實際導入人工智慧所需的相關流程。
第5名。生成式AI應用速成：創作詠唱師-影音創作課(11/30開課)
🔴報名截止日：2024/11/17🔴
你可以學到
🌟虛擬角色打造 ｜ 從角色設計、到AI影片製作，一站式打造你的專屬虛擬網紅。
🌟短影音製作 ｜ 運用AI工具，快速生成各種特效、濾鏡，製作出精緻的短影音。
🌟內容行銷 ｜ 學習如何利用AI工具製作出更能觸動觀眾的內容。
第6名。生成式AI工具應用實戰 (線上直播課程)
你可以學到
行銷廣告文案+社群策略及內容+SEO生成+BingAI繪圖，一次學會生成式AI工具應用！
本課程「生成式AI工具應用」旨在教導學員如何利用最先進的生成式AI工具，特別是ChatGPT和微軟Bing AI繪圖工具，來提升行銷文案、社群媒體內容、SEO優化、廣告文案創作以及內容行銷的效率和成效。
第7名。生成式AI應用速成：創作詠唱師-繪圖設計課(12/21開課)
🔴報名截止日：2024/12/8🔴
你可以學到
🌟成為AI設計高手｜ 從設計小白變身AI設計達人，自信接下各種設計挑戰。
🌟擴大職涯發展｜ 掌握AI設計技能，提升職場競爭力，開拓更多職涯發展機會。
🌟節省設計成本｜ 減少外包設計費用，提高工作效率，為企業創造更多價值。
🌟實現創意無限｜ 突破傳統設計框架，用AI工具打造出獨一無二的視覺作品。
第8名。AI應用時代｜從邏輯思維到文字溝通，從職場複利到高效生活
藉由AI助手的力量，更高效地完成商務工作、激發靈感。也透過AI協助經營社群，包含工作行程、日常旅遊、飲食規劃等，提高短影音規劃的效率，進而產出斜槓複利。
第9名。一次搞懂 ChatGPT 工作法 | 5分鐘看懂，立即上手 AI 應用觀念！
5分鐘輕巧學：圖解式影音 X 25應用情境 X 30組AI神器
第10名。AI x 產品企劃(產品開發)實務應用班
你可以學到
往在產品企劃及開發上，所面臨到的難以解決的疑難問題，在未來都有機會利用AI工具進一步改善，取得更有效的解決方案。
本課程將教會您如何快速掌握AI在商業分析、創意生成、行銷文案、用戶旅程設計與消費者行為洞察中的應用，並了解如何將這些工具應用於產品企劃流程中。
更多AI課程推薦：
2
0
7228 0
拍手
留言
分享
Line
複製連結
收藏
學習精靈
04/27 00:00
youtube.com
平面多色打印三步曲 EP1 - Inkscape 製作 SVG
106 0
分享
Line
複製連結
收藏
學習精靈
03/04 00:00
youtube.com
SVG 動態圖檔製作教學
1 0
分享
Line
複製連結
收藏
推薦給你
[政府補助]AI 數據應用人才養成班
全遠端授課+學費最高100%補助=轉職 #資料分析師 的最佳契機！
想像一下，未來的你，熟練運用數據解決商業問題，成為企業不可或缺的核心人才
當夢寐以求的薪資入帳時，你會感謝今天為自己做出的這個改變
👉 AI數據應用人才養成班，幫助你從現在走向這樣的未來
✔️ 學費最高100%補助，讓夢想不因金錢止步
✔️ 零基礎友好，博士級講師手把手指導
✔️ 實戰專題+就業媒合，實力說話，讓企業青睞！
🎁好禮加碼🎁
報名課程即享AWS AI國際認證考證補助 (價值$100美金💵)
在這裡你可以學到…
Python 程式語言 | 資料爬梳與處理 | 機器學習應用 | 商業分析與視覺化 | 雲端分析
現在，屬於你的轉職機會就在眼前👀
📆 開課日期：2024/12/23 ~ 2025/4/11
📆 報名截止：2024/12/9
為你的職場未來開啟全新可能！
0
0
84 0
拍手
留言
分享
Line
複製連結
收藏
你可能感興趣的教室