104學習精靈

SVG

SVG
關注
邀請朋友
邀請朋友

Line

Facebook

複製連結

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

SVG 學習推薦

全部
影片
文章
Hahow 小蛙編輯

2022/08/29

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

熱門精選

職場新手必修:用AI打造專屬履歷,面試機會翻倍跳!
😖 新手撰寫履歷常遇到的3大痛點,你遇過幾個?
1. 不知道如何突出自己的優勢
2. 看到履歷腦袋一片空白,想不到要寫什麼
3. 抓不住企業人資要的重點,常常變成流水帳
🪐AI 履歷課,幫你打造人資最想錄取的履歷
✔ 根據個人背景延伸,找出自己沒想到的優勢
✔ 有架構的透過AI指令,生成履歷經驗
✔ 工作+自傳+開場信,教學一次到位
🔥 早鳥報名,前30位現享講師1對1履歷健診!
0 1 2328 0
學習精靈

04/27 00:00

84 0
學習精靈

03/04 00:00

1 0

推薦給你

104學習精靈

3小時前

必備30句旅遊日文會話整理:多少錢、問路、打招呼、餐廳吃飯日語說法,附上羅馬英文,好記!
你計劃前往日本旅遊嗎?學習一些基礎日語可以讓你的旅行更加順利,並讓當地人感受到你的禮貌和友善。在這篇文章中,我們將介紹五大場景中的常用日語句子,包括購物、問路、打招呼、餐廳等狀況,幫助你在日本的各種情境下自如應對。
🪐購物 (買い物) Kaimono
1. 這個多少錢? (これはいくらですか?) Kore wa ikura desu ka?
2. 可以便宜一點嗎? (安くなりますか?) Yasuku narimasu ka?
3. 我可以看看嗎? (見てもいいですか?) Mite mo ii desu ka?
4. 你有這個嗎? (これがありますか?) Kore ga arimasu ka?
5. 這是什麼? (これは何ですか?) Kore wa nan desu ka?
6. 我想要這個。 (これをください。) Kore o kudasai.
7. 可以刷卡嗎? (クレジットカードは使えますか?) Kurejitto kaado wa tsukaemasu ka?
8. 你有其他顏色嗎? (他の色がありますか?) Hokano iro ga arimasu ka?
9. 我要退貨。 (返品したいです。) Henpin shitai desu.
10. 可以包裝嗎? (プレゼント用にしてください。) Puresento you ni shite kudasai.
🪐吃飯 (食事) Shokuji
1. 請給我菜單。 (メニューをください。) Menyuu o kudasai.
2. 這道菜有什麼? (この料理は何が入っていますか?) Kono ryouri wa nani ga haitteimasu ka?
3. 請給我推薦一下。 (おすすめをお願いします。) Osusume o onegai shimasu.
4. 我是素食者。 (私はベジタリアンです。) Watashi wa bejitarian desu.
5. 可以點餐嗎? (注文してもいいですか?) Chuumon shite mo ii desu ka?
6. 我不吃海鮮。 (私は海鮮を食べません。) Watashi wa kaisen o tabemasen.
7. 請給我一杯水。 (水をください。) Mizu o kudasai.
8. 可以給我帳單嗎? (お勘定をください。) Okanjou o kudasai.
9. 這道菜很好吃! (この料理はおいしいです!) Kono ryouri wa oishii desu!
10. 謝謝您的服務。 (ごちそうさまでした。) Gochisousama deshita.
🪐禮儀 (礼儀) Reigi
1. 早上好。 (おはようございます。) Ohayou gozaimasu.
2. 你好。 (こんにちは。) Konnichiwa.
3. 晚上好。 (こんばんは。) Konbanwa.
4. 再見。 (さようなら。) Sayounara.
5. 請。 (お願いします。) Onegai shimasu.
6. 謝謝。 (ありがとうございます。) Arigatou gozaimasu.
7. 對不起。 (すみません。) Sumimasen.
8. 沒關係。 (大丈夫です。) Daijoubu desu.
9. 請問廁所在哪裡? (トイレはどこですか?) Toire wa doko desu ka?
10. 請多關照。 (よろしくお願いします。) Yoroshiku onegai shimasu.
學習這些基礎日語句子,不僅能讓你的日本旅遊更加順利,還能讓你與當地人有更好的互動。如果你正在計劃前往日本,記得把這些實用的日語句子學起來,讓你的旅程更加愉快和無憂!
追蹤我們~ 學更多實用日語!
0 0 53 0
你可能感興趣的教室