https://codepen.io/ericcai/pen/qBzgBRX
第二天的挑戰是製作一個有漸層變化效果的動畫，當滑鼠懸停時背景和文字顏色會隨之變化。這次使用了 CSS 自定義屬性 (@property) 來處理顏色和角度的漸變，並搭配 hover 狀態來觸發動畫。
主要技術點：
linear-gradient 來製作背景漸層。@property 讓我們可以更靈活地控制 CSS 變數，並允許我們在動畫中過渡顏色和角度。transition 被用來控制漸變的過渡效果。這個挑戰除了強化漸層和動畫的應用，也介紹了 @property 的使用，這是 CSS Houdini 的一部分，讓 CSS 變數可以過渡，非常有趣的技術點。
總結：今天的挑戰讓我更深入地使用 @property 和 linear-gradient，尤其在處理 hover 狀態下的動畫過渡上，增加了動態效果。Day 2 的難易度我給 2/5（分），相比於第一天，更多的是在動畫和漸層的應用，有收穫！😄
iThome鐵人賽
看影片追技術