iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

Do you wanna play? CSS game ぎりぎり 系列

在前端網頁的領域之中,有著五花八門的工具,但最初的本質還是HTML/CSS/JavaScript,筆者將透過「100 Days CSS Challenge」的題目, 每天選一題進行實作與筆記,讓大家更熟悉CSS並能夠透過網路資源達到持續自我提升,這30天就來會會CSS吧 ~ ぎりぎり!

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day 11] Watch: Watch me (Whip/Nae Nae)

Watch me whip(whip), watch me Nae Nae ~ 早上起來洗臉刷牙,戴上手錶錢包鑰匙手機,出門去玩囉~今天我們來實作Day #10...

2022-09-18 ‧ 由 steventhibe 分享
DAY 12

[Day 12] Walking Boots: 行走的紅鞋子~咯噔咯噔

說時遲,那時快,身後傳來咯噔咯噔的腳步聲,我一回頭不見人影,暗自低喃:「奇也怪哉!」,瞥向一旁卻見一雙紅靴子一起一落,從我身邊走過...那是何人? 今天我們來實...

2022-09-19 ‧ 由 steventhibe 分享
DAY 13

[Day 13] Tooltip: 引經據典 製作自己的小圖釘

在我們成長過程中,多多少少看過一些名言佳句,總有幾句特別地打動自己的內心,也許其中有些文字是不太熟悉,這時候就可以用小圖釘把他的意思給記錄下來~ 今天我們來實作...

2022-09-20 ‧ 由 steventhibe 分享
DAY 14

[Day 14] User Gallery: 來曬一下你的相片集!

大家出門去玩的時候,多少會拍下一些相片,其中有些特別值得紀念的相片,這時候就可以考慮製作個自己的相片集來呈現~今天我們來實作Day #13 User Galle...

2022-09-21 ‧ 由 steventhibe 分享
DAY 15

[Day 15] Bicyclopter: 腳踏車還是直升機? 我要腳踏直升機!

事情是發生在Thibe高中的時候,當時放學時間緊迫,我急著回家打LOL,就在我加速騎著Ubike,頭上剛好飛過一台直升機,我心裡想:「要是能搭直升機就好了!」這...

2022-09-22 ‧ 由 steventhibe 分享
DAY 16

[Day 16] Upload: 以假亂真的上傳

我們常常在交作業、交報告、分享檔案的時候需要上傳的步驟,那你有想過做一個好看的上傳動畫嗎?今天我們就來實作Day #15,不會實際上傳檔案的好看動畫 Uploa...

2022-09-23 ‧ 由 steventhibe 分享
DAY 17

[Day 17] 番外篇: scale, rotate, translate(縮放、旋轉、移動)

scale, rotate, translate 今天學習到了個新知識,主要是透過這部影片CSS Transform Is Dead! Use This Ins...

2022-09-24 ‧ 由 steventhibe 分享
DAY 18

[Day 18] Blobby: 改變形狀的閃耀泡泡

在昨天的文章學習到新的scale, rotate, translate的寫法,可以從transform獨立出來,今天就可以實際運用,配合SVG的圖形,來達到改變...

2022-09-25 ‧ 由 steventhibe 分享
DAY 19

[Day 19] Penrose Triangle: 潘洛斯三角(不可能三角)

今天我們來實作Day #17,潘洛斯三角形為存在於二維空間的三角形,而在現實世界中不可能存在的物體。 潘洛斯三角維基百科 Penrose Triangle...

2022-09-26 ‧ 由 steventhibe 分享
DAY 20

[Day 20] Elastic: 彈跳球今天彈性放假

人與人之間都是具有彈性的,好人就會被凹一下(='X'=),同事:「诶你用完囉,今天進度幫我一下好不好~」今天我們來實作Day #18 Elastic Code...

2022-09-27 ‧ 由 steventhibe 分享