iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 29

Day29 網頁前端-刻意練習(模仿遊戲#2)

Day29 六角 模仿遊戲#2

https://ithelp.ithome.com.tw/upload/images/20200928/20129161RR6PxY5IMg.jpg
https://ithelp.ithome.com.tw/upload/images/20200928/20129161ihuxhmocid.png

簡單小語

一開始看到這個版就覺得很酷可以記錄信用卡資訊,稍微玩了一下動畫起初覺得有難的感覺,但實際寫下去才發現兩行就可以完成了,看來我的功力真的太淺,無法用思考得知程式難易度,這次練習用了好久不見的animation製作動畫效果,也複習了linear-gradient的用法,讓畫面可有漸層感,重要的是學到了文字漸層的用法,雖然也是複製貼上,不過也算學了一個新樣式,套用下去就能讓信用卡數字慢慢漸變,帶有立體的金屬感,彷彿真正的信用卡(咦!?自我感覺良好),30天即將抵達尾聲,不是終點而是一個歷程的斷點,不要被30天侷限住了,持續挑戰。

筆記分享

  1. 文字漸變起手式,套用下去就對了。
background-color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  1. 注意每一階層的寬度及padding,讓物件有層層的感覺,wrap, content, card, item-group
  2. 使用transform:rotate()旋轉font-awesome讓樣式看起來跟信用卡NFC相同。
  3. 信用卡數字套用animation及文件漸變方式,讓樣式看起來慢慢的有立體感,當然,是我自己認為。
  4. 利用偽元素製作MasterCard,讓兩個圓交疊並讓其中一個呈現透明感。
  5. 晶片讀取點也是利用偽元素方式,線條部分則是複習box-shadow複製再複製,記好位置,就能行雲流水的運用囉。
  6. container內容結構寫好flex開下去,沒什麼大問題,在小尺寸捨棄了品項,因為太寬啦。
  7. JQuery掌握重點,記住自己點擊後要產生的效果,釐清一下迎刃而解。
  8. item-group的底層灰色背景使用偽元素製作,注意z-index的權重即可避免內容被覆蓋。
  9. linear-graditent%數記得定義,腦袋想像漸變效果,實作後判斷自己的觀念是否有誤。

刻意練習

Practice(200825 Day 29)

樣板來源

Wallet App Animation


2020 iT邦幫忙鐵人賽 Day29 網頁前端-刻意練習(模仿遊戲#2)


上一篇
Day28 網頁前端-刻意練習(模仿遊戲#1)
下一篇
Day30 網頁前端-刻意練習(鐵人煉成)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言