掌握進階的 css 動畫( animation )、過渡( transitions )和變換( transforms )，並實踐 140 個創造性的範例
從這 19.5 小時的課程，你會學到
- 掌握 CSS 動畫、過場特效和變換的方法
- 使用 CSS 動畫、過場特效和變換建立140多個不同的例子
- 建立不同的按鈕、影象、卡片、載入器、選單、創意效果等等
- 能夠建立他們所能想到的任何創造性的 CSS 動畫
- 掌握 CSS 的 clip-path 屬性，並學習如何在 html 元素的動畫中使用它
要求
- 網際網路連線
- Html 和 CSS 的基本理解 ( 可以參考 HTML/CSS 基礎課程介紹 )
- 任何你選擇的程式碼編輯器
課程說明
你是否曾經在 codepen 或任何網站上看過網頁動畫，然後你會想 “哦，太棒了！ 我想這麼做！” 但隨後又覺得這很複雜並且遠遠超出了你的技能範圍？
好吧，我在這裡告訴你：不，絕對不是！，我是 Ahmed Sadek，一名擁有 7 年以上經驗的全端 Web 開發人員和自由職業者，我歡迎你參加我的 CSS 和 Javascript 動畫課程。
CSS 和 Javascript 動畫正迅速成為重要的設計工具，越來越多地用於幫助我們的用戶理解我們的網站並與之互動。 它們絕對是網頁設計的下一個重大進展！ 用它可以完成絕對令人驚奇的事。 這實際上取決於你的想像！ 它們賦予你的網站生命力並增強用戶體驗，你知道更好的用戶體驗意味著更高的聲譽和更滿意的訪客。 因此，CSS 和 Javascript 動畫對於當今的任何 Web 開發人員來說都是至關重要的技能……我來這裡是為了確保你以正確的方式學習它。
因此，在本課程中，你將從頭開始掌握 CSS 動畫、過渡和變換，不僅如此，我們還將親自動手並一起創建許多範例，以便你獲得大量的想法和大量的知識。靈感來幫助你創建任何你能想到的複雜動畫。
我們將首先查看 CSS 過渡屬性( transition property )，以了解它是什麼以及它如何為 html 元素賦予生命。
然後我們將繼續討論 CSS 變換( transforms )，它為許多創意選項打開了大門，從在頁面上移動元素到縮放和旋轉它們。 因此，我們將討論可以在 2D 和 3D 環境中使用的所有變換函數。
之後，我們就進入有趣的部分了！ 我們將使用我們學到的有關 CSS 變換和過渡的所有技術和屬性，並且我們將開始建立一些創意範例，這些範例將為您提供靈感並幫助您充分利用所學！
我們將透過創建按鈕懸停效果、圖像懸停效果、選單效果、卡片效果和一些更多不同的酷範例來開始本節！
然後我們將轉向 CSS 動畫( animation )和關鍵幀( keyframes )，在那裡我們將了解有關它們的所有內容及其所有屬性。
之後我們將繼續課程的部分，我們將創建許多 CSS 動畫範例，這些範例將激發你的想像並幫助你創建你能想到的任何動畫！
然後我們將進入剪輯路徑效果部分，在這裡我們將學習有關 CSS 剪輯路徑屬性的所有內容以及如何使用它來創建一些真正有創意的範例和效果。
最後，我們將進入 javascript 效果部分，將我們的技能提升到一個新的水準，在這裡我們將使用 javascript 的力量創建一些更複雜的效果。
完成本課程時，你將能夠了解任何 Web 動畫的工作原理，並且你將創建 140 多個具有不同想法的不同專案，這將幫助你提高創造力，並從其他 Web 開發人員中脫穎而出。 因此，如果你和我一樣興奮，請點擊註冊按鈕，讓我們直接學習 CSS 和 Javascript 動畫、過渡和變換創意課程！
目標受眾
- 想要提升 CSS 和 Javascript 技能的網頁設計師和開發人員
- 想要掌握 CSS 和 Javascript 動畫和轉換並能夠創建他們能想到的任何創意動畫的 Web 開發人員
講師簡介
Ahmed Sadek 全端網頁開發者，自由工作者和老師 ( 更多講師主講課程介紹 )
嗨，我是 Ahmed，很高興你來了！
我是一名高級網路開發者，在過去的 7 年裡，我一直是一名自由職業者，我已經開發了數百個 Web 專案，並擁有數十個滿意的客戶！
我已經幫助各種規模的公司做改善。
我迫不及待地想和大家分享我的網路開發知識，所以如果你有興趣學習現代的網路開發技術，我們課程中見囉！
英文字幕：有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
- 點選 ✨ 大多課程 NT320優惠連結 (到 425 )| Udemy 永久擁有課程 ( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得 ）
- Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- ＄代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現
報名參加課程
也許你會有興趣
- HTML/CSS 基礎課程介紹
- 網頁前端工程師學習地圖
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣！
發表迴響