화면 너비/높이(CSS 전용)

Temani Afif는 일반적으로 CSS 데모와 함께 이 목록에 나타납니다. 이번에는 인상적인 점 때문에 사용자 정의 속성을 속성 및 삼각 함수와 결합하여 화면 높이와 너비를 표시할 수 있습니다. JavaScript는 전혀 없습니다!

WebGL 대화형 Blob

이 귀여운 방울 위에 마우스를 올려 놓으면 그들이 반응하고 움직이는 모습을 볼 수 있습니다(이미 움직이는 것보다 더 많이). 이것은 Ksenia Kondrashova가 제작한 WebGL을 사용한 재미있는 데모로 웹사이트에서 대화형(그리고 주의를 산만하게 하는) 배경으로 사용할 수 있습니다.

영화 명언 해킹

영화 인용문과 빠르게 진행되는 행맨 게임을 좋아한다면 Alexandre Vacassin의 이 데모가 당신을 위한 것입니다. 문자를 클릭하여 영화 인용문을 맞춰보세요(키보드 옵션 없음, afaik). 하지만 조심하세요. 작업을 완료하는 데 1분이 주어지며, 시도가 실패할 때마다 5초가 차감됩니다.

링 미로

이번에는 ZIM의 또 다른 게임입니다. ThreeJS로 만든 이 3차원 미로는 고리 모양입니다. CodePen 챌린지를 위해 코딩된 이 재미있는 데모에서는 공이 미로 주위에서 마우스를 따라갑니다(때때로 어려울 수 있음).

탐색 호버 효과

Veronica Hristova가 이 대화형 탐색을 코딩했습니다. ::before 및 ::after 의사 요소를 사용하여 데이터 속성에 지정된 텍스트를 복제하고 호버 시 다채로운 3D 효과를 생성합니다. 간단하고 멋집니다.

Three.Js 블로비 애플

이것은 Ksenia Kondrashova의 또 다른 데모입니다. 회전하면서 유동적으로 움직이는 이 사과 주위를 돌면서 모양을 잃고 새로운 모양을 되찾습니다. 이는 ThreeJS를 사용한 멋진 실험입니다.

빌 스플리터 앱

Dribbble(코드펜 설명에 링크됨)에서 발견된 디자인에서 영감을 받아 Dilum Sanjaya는 React 및 Tailwind를 사용하여 이 청구서 분할기의 라이브 버전을 코딩했습니다. 깔끔해 보이네요.

참새

최근 이 시리즈에는 CSS 아트가 거의 없었으며 Alina의 아름다운 참새 그림은 주목할 만한 복귀입니다. Behance의 그림(코드에 연결됨)을 기반으로 한 코드의 단순성은 그림의 깔끔함과 대조됩니다. 놀라운 작품입니다.

IK 석호의 생물

화면 주위로 마우스를 움직여 이 생물체/방울이 어떻게 따라가는지 확인하세요. 처음에 상단에 부착된 이 벌레(? 거머리? 생물!)는 이동하면서 분리되어 성장합니다. Liam Egan이 이 데모를 개발했습니다.

3D 젠가 - CSS

Josetxu가 프로그래밍한 3D CSS 게임입니다. Jenga를 완전히 플레이할 수는 없지만 가운데 부분을 클릭하면 애니메이션이 작동하고 움직일 수 있습니다. 그런 다음 "역방향 Jenga"를 통해 다시 안쪽으로 밀어 넣을 수 있습니다.

이 데모가 마음에 드신다면 2024년 6월의 10가지 Cool CodePen 데모가 포함된 이전 기사를 확인하세요!