第十二屆 優選

web
網頁阿尼尛,到底是在幹尛?
CathyShen

系列文章

DAY 1

序、關於我轉職研究網頁動畫的那件事

⇢⇢ 技能確認: CssSpecialty / 稱號:「畫面的大賢者」...獲取成功 ✨⇢⇢ 技能確認: CanvasSkill / 稱號:「資料的捕食者」....

DAY 2

第一章、想成為網頁動畫創世神?那麼你不可不知的動畫12法則!

前言 當你打開一變空白的網頁,心想「天啊我要從哪邊開始呢?」,這樣的狀況簡直就跟生存模式不小心切換到 困難 一樣。想勇闖地下城,就讓我們先來了解最基礎的 動畫...

DAY 3

第二章、網頁動畫到底在幹尛?才不告訴逆咧~咧、咧~

前言 從前從前...神說要有...咳咳,好吧這樣的開場白太過老梗。介紹完基礎的動畫法則後,我們來聊聊網頁動畫歷史吧~ GIF 圖像互換格式 1987年一家網頁服...

DAY 4

第三章、我是愛與正義的水少服戰士,要代替 視差滾動 懲♥︎罰♥︎你

前言 網頁動畫起手式不難,透過一些視覺暫留、前後景的切換,就可以做出最簡的單(偽)動畫效果。。 參考網站 參考網站 像這樣的網站已經是近幾年網站設計趨勢,可以簡...

DAY 5

第四章、今晚,我想來點...雙重口感切換的 Transition

前言 在 CSS3 內有兩種新的屬性讓我們可以實現特別的動畫效果,分別是 Transition 以及 Animation ,本章節將詳細的介紹 Transiti...

DAY 6

第五章、上上下下左左右右AB Transform

前言 做動畫的第一步,當然就是讓元素移動囉!在 CSS3 內我們可以使用很多方式來讓元素從 定位點A 移動至 定位點B,那麼本篇張我們來了解如何將敏捷值點到最高...

DAY 7

第六章、和我簽訂契約,成為魔法少女吧! Transform 3D (上篇)

前言 上一篇文章我們提到了如何用 CSS 屬性在網頁 2D 空間內移動變化,但是你以為這樣就夠了嗎? NoNoNo~ 既然在網頁上有 2D 空間的變化,當然也有...

DAY 8

第七章、和我簽訂契約,成為魔法少女吧! Transform 3D (下篇)

簡介 想成為魔法少女的第一個挑戰,就是馴服屬於自己的魔法道具,那麼今天我們就來試試看完成兩個魔法咒語吧! 第一個範例 我們先來試試看施放一個魔法,做出 3D 立...

DAY 9

第八章、☞ 轟隆隆隆衝衝衝 Animation 引擎發動 ━☆゚.*・。 (正)

前言 在CSS3 中新增了 Animation 語法,這個語法相較於 使用 JavaScript 編寫動畫效果,有以下好處: 對於網頁程式初學者來說,CSS...

DAY 10

第九章、☞ 轟隆隆隆衝衝衝 Animation 引擎發動 ━☆゚.*・。 (反)

前言 在昨天的文章中我們詳細了介紹 何謂 CSS Animation,而今天我們就來了解 Animation 內有哪些屬性可以運用吧! Animation 基礎...