iT邦幫忙

harry xie
iT邦研究生 1 級 ‧ 點數 3394
台達電子軟體工程師 國立中正大學資訊管理學系
38308
累計瀏覽數
站內簡訊 追蹤

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
影片教學

CSS 實作小品30天 系列

在這次的鐵人賽中，我將會用錄下 coding 過程的方式實作30個只用 HTML&CSS 就可以做出的小作品，敬請期待吧!

鐵人鍊成 ｜ 共 31 篇文章 ｜ 62 人訂閱 訂閱系列文 RSS系列文
1 Like 0 留言 657 瀏覽
DAY 11

Day11-CSS 手刻燃燒的火焰

來試試刻一團燃燒的火焰吧! Demo link

2020-09-11 ‧ 由 harry xie 分享
0 Like 0 留言 765 瀏覽
DAY 12

Day12-CSS 3D 書本

做一個看起來立體的書本。 Demo link

2020-09-12 ‧ 由 harry xie 分享
0 Like 0 留言 706 瀏覽
DAY 13

Day13-CSS 製作 hover 時 3D 翻轉的圖片

製作 hover 時由某一張圖片轉到另一張圖片的效果。 Demo link

2020-09-13 ‧ 由 harry xie 分享
0 Like 0 留言 754 瀏覽
DAY 14

Day14-CSS 手刻鑽石

利用 CSS 製作三角形的技巧拼湊出一顆鑽石。 Demo link

2020-09-14 ‧ 由 harry xie 分享
0 Like 0 留言 697 瀏覽
DAY 15

Day15-CSS 條紋背景的按鈕

利用 CSS background: repeating-linear-gradient 的語法，創造條紋背景按鈕。 Demo link

2020-09-15 ‧ 由 harry xie 分享
0 Like 1 留言 783 瀏覽
DAY 16

Day16-CSS 滑鼠 hover 卡片時打開卡片的效果

主要原理就是利用 transform: rotate 這個 CSS 屬性。 Demo link

2020-09-16 ‧ 由 harry xie 分享
0 Like 0 留言 559 瀏覽
DAY 17

Day17-CSS 製作剪紙文字效果

Demo link

2020-09-17 ‧ 由 harry xie 分享
0 Like 0 留言 1218 瀏覽
DAY 18

Day18-CSS 輪播的文字

讓不同的一小段文字輪流出現的效果。 Demo link

2020-09-18 ‧ 由 harry xie 分享
0 Like 1 留言 1145 瀏覽
DAY 19

Day19-CSS 利用視差滾動，讓螺旋手裏劍轉起來

我們利用視差滾動的特性來製作影格動畫，讓圖片內的螺旋手裏劍轉起來。 Demo link

2020-09-19 ‧ 由 harry xie 分享
1 Like 1 留言 1209 瀏覽
DAY 20

Day20-CSS 刻永恆萬花筒寫輪眼 - 左眼天照，右眼加具土命，雙眼須佐能乎

今天我們來用純 CSS 製作宇智波佐助的萬花筒和永恆萬花筒寫輪眼。 Demo link

2020-09-20 ‧ 由 harry xie 分享
harry xie的鐵人檔案
harry xie的收藏
harry xie的追蹤
harry xie的Like
harry xie的紀錄
harry xie的訂閱列表