멋진 CodePen 데모(9월 4일)
- Linda Hamilton원래의
- 2024-10-08 11:02:32566검색
호버 효과가 있는 멋진 아바타 헤더(II)
Temani Afif는 항상 멋진 CSS 트릭을 활용합니다. 이번에는 아바타의 위치에 맞춰 움직이는 애니메이션 노치입니다. 단 몇 줄의 HTML 및 CSS 코드만으로 이 모든 작업을 수행할 수 있습니다.
시침
스틱을 움직여서 창에 시간이 반영되도록 변경되는 것을 확인하세요. Rafa의 이 대화형 데모는 훌륭하게 제작되었으며 컴퓨터 시간에 맞춰 맞춤화된 경험을 제공합니다.
경량 픽셀 왜곡 애니메이션
Ksenia Kondrashova의 셰이더를 사용한 재미있는 실험입니다. 다양한 효과를 위해 타일 크기와 오프셋을 사용자 정의하세요. 물이나 모래 질감을 시뮬레이션하는 데 이 효과가 사용되는 것을 볼 수 있었습니다. 모션 경고: 이 데모는 당신을 현기증나게 만들 수 있습니다.
소나무
Guillaume Martigny는 나무의 정점 뷰로 차분한 3D 효과를 생성하는 JavaScript 2D 드로잉 라이브러리인 Pencil.js를 사용하여 무한한 소나무 숲을 구현했습니다.
댄싱버그(애니메이션)
Dribbble의 만화에서 영감을 받아 Grant Jenkins는 춤추는 벌레로 아름다운 애니메이션을 만들었습니다. 그리기는
도커
Mergim Ujkani의 일부 CSS 아트: Docker 로고 고래가 바다에서 수영하고 점프하는 애니메이션 버전입니다. 간단하고 재미있으며 HTML과 CSS로만 코딩되었습니다.
키프레임 내부의 대상 범위 - 보기-타임라인 범위
Mariana Beldi의 멋진 스크롤 기반 애니메이션 데모입니다. 요소가 이동하고, 줄어들고, 페이드 아웃되어 부드러운 스크롤 경험을 제공합니다. 이 작은 것들이 웹사이트를 한 단계 더 발전시키는 원동력입니다.
올림픽 메달
Gibson의 올림픽 메달 카운터 구성 요소입니다. React와 Framer Motion으로 제작된 이 위젯은 스포츠 웹사이트에서 멋진 위젯이 될 것입니다. 특히 애니메이션 제어를 위한 다른 구성 요소와 결합하면 더욱 그렇습니다.
녹음 토글
Jon Kantner의 새로운 대화형 구성 요소: 모든 사용자 상호 작용(시작 및 끝)과 시간 경과에 따라 애니메이션이 적용되는 녹음 위젯입니다. 슬릭.
제사
yuanchuan은 아름다운 애니메이션 SVG 및 CSS 기념일 로고를 제작하며 이 작품도 예외는 아닙니다. 회전하는 애니메이션은 매혹적이며 최면을 거는 듯한 느낌을 줍니다. 그리고 코드도 매우 간단합니다! 정말 놀랍습니다.
위 내용은 멋진 CodePen 데모(9월 4일)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!