CSS 시각 착시

Source: Dev.to

지난 한 주 동안, CSS만을 사용해(하나의 경우는 약간의 HTML을 사용해) 일련의 착시 현상을 코딩했습니다. 40개의 작품을 모아 **CodePen 컬렉션**을 만들었으며, 앞으로 몇 주 안에 더 늘어날 수도 있습니다.

많은 데모가 색상 효과를 활용하고, 일부는 애니메이션이며, 대부분은 움직임 경고를 포함하고 있습니다—하지만 경고를 더 추가해야 할 것 같습니다. 몇몇을 코딩하면서 정말 어지러웠어요 😬

Favorites

Mainz‑Linez Illusion

이 애니메이션 데모는 화면이 좁거나 넓을 때 더 잘 보입니다. 빨간 점에 집중하면 위아래로 움직이는 것을 볼 수 있고, 검은 십자에 눈을 옮기면 빨간 점이 물결치는 움직임을 시작합니다!

이와 다음 착시 현상에서는 super‑ingenious wave shape generator 를 만든 @afif 를 사용했습니다.

Curvature Blindness

거의 동일한 곡선들이 색상만 다릅니다. 곡선을 굴곡점‑굽곡점 혹은 꼭대기‑꼭대기 사이에서 바라보면 전혀 다른 형태처럼 보이는데, 어느 하나는 전혀 물결처럼 보이지 않을 정도입니다. (이것은 작은 화면에서 더 잘 보입니다.)

Gray Color Circles

빨강, 파랑, 초록 구가 보이나요? 실제로는 모두 회색입니다. 데모 위에 마우스를 올리면 진짜 색상이 드러납니다. 기본 색을 겹치게 하면 뇌가 그 색으로 구를 “채워” 보게 됩니다. 처음엔 선을 너무 길게 만들어 효과가 가려졌지만, 최종 결과는 잘 작동합니다.

Gray Bars

양쪽 열과 중앙 선이 정확히 같은 평평한 회색 톤을 공유합니다—선 자체에는 그라데이션이 없고 배경에만 있습니다. 이 데모는 보기 쉽고 코딩도 쉽습니다.

The Breathing Square

또 다른 애니메이션 작품으로 CodePen에서 확인해야 합니다. 파란 정사각형이 맥박을 뛰거나 “숨 쉬는” 듯 보이지만, 실제 크기는 변하지 않고 단지 회전하고 있을 뿐입니다. 마우스를 올리면 트릭이 드러납니다.

그리고 이 다섯 개 외에도 35개의 작품이 더 있습니다. 모두 확인해 보세요! 즐겁게 감상하시길 바라며, 앞으로 몇 주 안에 더 추가할 예정입니다.