創意高階 CSS 動畫-創造100個專案!

Contents

掌握進階的 css 動畫( animation )、轉場( transitions )和轉換( transforms )，並實踐 100 個創造性的範例

從這 13 小時的課程，你會學到

掌握 CSS 動畫、過場特效和變換的方法
使用 CSS 動畫、過場特效和變換建立100多個不同的例子
能夠建立他們所能想到的任何創造性的 CSS 動畫
掌握 CSS 的 clip-path 屬性，並學習如何在 html 元素的動畫中使用它
建立不同的按鈕、影象、卡片、載入器、選單、創意效果等等

要求

網際網路連線
Html 和 CSS 的基本理解 ( 可以參考 HTML/CSS 基礎課程介紹 )
任何你選擇的程式碼編輯器

課程說明

你有沒有看過關於 codepen 的網頁動畫，然後你想 “ 這太棒了，我想這麼做 ! ” 但是你卻認為它很複雜，遠遠超出了你的能力。那麼，今天我在這裡告訴你不會太難，你可以做到的。

css 動畫、轉場和轉換是當今每個網頁的重要組成部分，它們是每個 Web 開發者的關鍵技能。它們增加了互動性，給你的網頁賦予了生命，而且讓網頁更有趣！

在這門課程中，你將從頭學習掌握 css 動畫、轉場和轉換，不僅僅是這樣，我們將會親手一起建立許多例子，這樣你就可以獲得大量的想法和靈感來幫助你創造任何你能想到的複雜動畫。

我們先來看看 css 轉場( transition )屬性，瞭解它是什麼？以及如何改變和增加 html 元素的互動性。然後我們將轉移到 css 轉換( transforms )，這可以開啟許多創造性選項的大門，從移動頁面周圍的元素到縮放和旋轉，所以我們將討論所有我們可以在 2D 和 3D 環境中使用的轉換函數( transform functions )。然後來到好玩的地方～我們將使用我們學到的關於 css 轉場和轉換的所有東西和屬性，開始做一些有創意的例子，它們會給你靈感，幫助你充分利用你所學到的東西！

然後我們將轉向 css 動畫，我們將學習關於它的一切和它的所有的資產。最後，我們將到最後一個部分，在那裡我們將建立許多 css 動畫的例子，這些動畫會激發你、幫助你創造任何你能想到的動畫！

目標受眾

網際網路連接
Html 和 CSS 的基本理解
任何你選擇的程式碼編輯器

講師簡介

Ahmed Sadek 全端網頁開發者，自由工作者和老師 ( 更多講師主講課程介紹 )

嗨，我是 Ahmed，很高興你來了！

我是一名高級網路開發者，在過去的 7 年裡，我一直是一名自由職業者，我已經開發了數百個 Web 專案，並擁有數十個滿意的客戶！

我已經幫助各種規模的公司做改善。

我迫不及待地想和大家分享我的網路開發知識，所以如果你有興趣學習現代的網路開發技術，我們課程中見囉！

英文字幕：有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

點選這個✨優惠連結✨ 課程特價 | Udemy 永久擁有課程 NT390 起( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現