🔧 阿川の電商水電行
標題：CSS光學錯覺
已發布：是
說明：一系列用 CSS 創造的光學錯覺圖像。
標籤：CSS、HTML、Web開發、Showdev
封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3s9ah09r9mej777omqm.png
使用 100:42 的比例可獲得最佳效果。
發佈時間：2025年12月3日 16:43 +0000
過去一周，我完全使用 CSS 編寫了一系列光學錯覺動畫（其中一個用到了 HTML，但大部分都是純 CSS）。我在 CodePen 上建立了一個包含 40 個動畫的集合，未來幾週數量可能還會增加。
許多它們都運用了色彩特效，有些是動畫，很多都應該（也確實）加上動態警告……雖然可能我應該給更多加入。寫其中一些程式碼的時候我真的頭暈目眩😬
以下是我從這個系列中挑選的一些最喜歡的作品：
美因茨-利內茲幻覺
這個是動畫（在窄螢幕/大螢幕上效果更好）。玩法是觀察紅點，注意它們是如何上下移動的。然後把注意力集中在任何一個黑色十字上……突然間，紅點就開始做波浪形的運動！
{% codepen https://codepen.io/alvaromontoro/pen/gbMgwar %}
對於這個（以及下一個），我使用了 @afif 開發的超級巧妙的波形產生器。
曲率盲點
這組曲線幾乎完全相同：唯一的差別在於它們的顏色。如果將它們從一個拐點塗到另一個拐點，或從一個峰塗到另一個峰，它們看起來就會完全不同。連其中一條曲線看起來都不像波浪了！ （這條曲線在小螢幕上看起來更好。）
{% codepen https://codepen.io/alvaromontoro/pen/NPrbNbm %}
灰色圓圈
你看到紅色、藍色和綠色的球體了嗎？如果我告訴你它們其實都是灰色的呢？ （它們確實是灰色的！滑鼠懸停在演示圖上即可查看）但是，如果在上面疊加一些原色，大腦就會用手邊的顏色「填充」這些球體。一開始我把線條畫得太高了，所以效果不太明顯。我很喜歡最終的效果。
{% codepen https://codepen.io/alvaromontoro/pen/VYjKryZ %}
灰色條
兩側的列和中間的線條都是同一種純灰色。沒錯，就是單一色調的灰色。漸層色只出現在背景上，線條本身並沒有。我喜歡這個演示，因為它既容易理解又容易編寫程式碼。
{% codepen https://codepen.io/alvaromontoro/pen/gbMLYqy %}
呼吸廣場
另一個動畫範例，你需要去 CodePen 查看。這個藍色方塊看起來像是在脈動或呼吸，時而放大時而縮小……但實際上它只是同一個大小不變的方塊，在旋轉。滑鼠懸停即可查看。
{% codepen https://codepen.io/alvaromontoro/pen/pvbErNQ %}
和這五張圖一樣，還有35張圖。快來看看吧！希望你們喜歡。接下來幾週我還會加入更多。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
