【CSS】當你有一套可變字型，要怎麼讓它動起來？可變字型的CSS語法動畫教學
0可變字體很好玩，但是可以怎麼玩？不用學動畫軟體也可以做出可變字體動畫的方法來了。
章節目錄————————————
0:00 前言
我的專案 Rasterquan: https://www.behance.net/gallery/117754611/Font-Rasterquan
0:32 可變字型是什麼？
可變字型DEMO網站: https://v-fonts.com/
1:09 可變字型動畫方法1 - After Effects
Type Morph: https://aescripts.com/type-morph/
VariFont: https://aescripts.com/varifont/
1:58 可變字型動畫方法2 - Illustrator
3:00 可變字型動畫方法3 - Dinamo Darkroom
Dinamo Darkroom: https://dinamodarkroom.com/gauntlet/
4:54 可變字型動畫方法4 - 程式語言CSS
用Python製作的方法: https://www.harbortype.com/how-to-animate-variable-fonts-using-python-and-drawbot/
5:47 製作工具 CodePen
CodePen: https://codepen.io/
9:37 範例一
範例連結: https://codepen.io/erikyin/pen/NWdBVMj
我的字體下載頁面: https://www.1001fonts.com/rasterquan-font.html
Wakamai Fondue: https://wakamaifondue.com/
25:28 範例二
範例連結: https://codepen.io/erikyin/pen/zYNyzge
32:57 完成之後
Mac螢幕錄製方法: https://support.apple.com/zh-tw/HT208721
Gifski: https://apps.apple.com/tw/app/gifski/id1351639930?mt=12
37:37 結論
資料分享————————————
我看到的第一篇教學: https://www.etceteratype.co/blog/animating-a-variable-font-with-css
FireFox的網頁技術文件: https://developer.mozilla.org/zh-TW/docs/Web/CSS
Wibibi網頁設計教學百科: https://www.wibibi.com/c.php?cid=21
CSS-Tricks: https://css-tricks.com/snippets/css/
我的————————————
作品頁: https://www.behance.net/erikyin
臉書: https://www.facebook.com/erikyin/
如果我的影片對你有幫助，你也有一些餘裕，歡迎小額贊助
讓我買杯咖啡: https://www.buymeacoffee.com/erikyin
或是用PayPal也可以: https://paypal.me/erikyin?locale.x=zh_TW
謝謝你看到這邊，下次見！
＝＝＝＝＝＝＝＝＝＝＝＝
如果你對我的作品有興趣，歡迎來我的Behance頁面看看。
http://behance.net/erikyin
如果你也對字型創作有興趣，歡迎來訊交個朋友。
如果你對我的創作過程、玩遊戲甚至未來可能的影音創作有興趣，歡迎訂閱這個Youtube頻道。
If you are interested in my work, welcome to visit my Behance page.
http://behance.net/erikyin
If you are also interested in font creation, welcome to contact me and make friends.
If you are interested in my creative process, playing games and even possible future video and livestreaming, just subscribe to this Youtube channel.
Other Videos By TzuYuan Yin's Type & Games Channel
| 2021-07-01 | 【Glyphs 3】可變字型出現紅 bar 怎麼辦？ / 樣式不一致的修正 各種常見情況和解決方法 |
| 2021-06-25 | 🔴 【機械迷城】#3 (end) 打遊戲賺金幣 |
| 2021-06-25 | 【字型檔】字型檔免安裝直接在Illustrator使用的方法（Mac系統） |
| 2021-06-23 | 【Glyphs 3】製作可變字體的基本流程教學 |
| 2021-06-19 | 🔴 【機械迷城】#2 搶救留聲機 |
| 2021-06-18 | 🔴 【機械迷城】#1 機器小男孩的英雄救美之旅 |
| 2021-06-11 | 🔴 【銀河歷險記3】#3 (end) 降落第二顆大星球 |
| 2021-06-05 | 🔴 【銀河歷險記3】#2 探索新星球 |
| 2021-06-04 | 🔴 【銀河歷險記1+2+3】#1 有機可愛的解謎小品 |
| 2021-05-27 | 【字型檔】可變字體鑲嵌到網頁裡的方法（Base64格式） |
| 2021-05-06 | 【CSS】當你有一套可變字型，要怎麼讓它動起來？可變字型的CSS語法動畫教學 |
| 2021-04-18 | 🔴 【Röki】#5 (end) 父女的城堡探險卡關之後 |
| 2021-04-09 | 🔴 【Röki】#4 父女的城堡探險 |
| 2021-04-02 | 🔴 【Röki】#3 喚醒鹿神 feat. 小助理 |
| 2021-03-27 | 🔴 【Röki】#2 接下來可能是悲傷故事的部分 |
| 2021-03-19 | 🔴 【Röki】#1 女孩和北歐神祇的相遇 |
| 2021-02-23 | 🔴 【Glyphs—新年字體馬拉松 第一回】Ratox Pt.3 |
| 2021-02-20 | 🔴 【Glyphs—新年字體馬拉松 第一回】Ratox Pt.2 |
| 2021-02-18 | 🔴 【Glyphs—新年字體馬拉松 第一回】Ratox Pt.1 |
| 2020-11-01 | 🔴 【Carto】挑戰破關外的10個成就 |
| 2020-10-31 | 🔴 【Carto】全破+無BGM版 |
Other Statistics
Counter-Strike: Source Statistics For TzuYuan Yin's Type & Games Channel
At present, TzuYuan Yin's Type & Games Channel has 727 views spread across 1 video for Counter-Strike: Source, and less than an hour worth of Counter-Strike: Source videos were uploaded to his channel. This makes up less than 0.10% of the total overall content on TzuYuan Yin's Type & Games Channel's YouTube channel.