멋진 CodePen 데모(8월 4일)
- 王林원래의
- 2024-09-11 08:30:36371검색
아이디어 형태
이 데모는 멋진 아이디어 제출/알림 구성 요소입니다. 부드러운 전환, 완벽한 색상 선택, 적절한 양의 상호 작용이 멋진 사용자 경험을 선사합니다. 이는 Jon Kantner가 작성한 이 목록의 두 가지 데모 중 첫 번째입니다.
스윙 로봇
Amit Sheen이 CSS의 3D 기능을 다시 보여줍니다. 이번에는 그네를 타고 노는 로봇입니다. 디테일을 확인하고 다양한 신체 부위가 어떻게 함께 움직이는지 확인하여 유연하고 아름다운 애니메이션을 만들어보세요.
버드 아이 메트로폴리스
하늘에서 도시의 인상적인 무한한 전망(방향을 바꾸려면 그 위에 마우스를 올리세요.) 그리고 그것이 더욱 놀라운 이유가 무엇인지 아시나요? 인기 있는 3D 라이브러리를 사용하지 않습니다! 바닐라 자바스크립트입니다. 놀라운 데모를 제공해 주신 Niklas Knaack에게 감사드립니다.
앨범 밈 생성기를 껴안고 있는 챈들러
Ines는 최근 정치 밈(자신도 코딩)을 바탕으로 Friends에서 영감을 받은 밈인 Chandler Bean이 앨범을 들고 있는 밈을 선보입니다. 슬리브는 파일 입력이므로 원하는 대로 이미지를 개인화할 수 있습니다. 깔끔해요
로테이션을 좋아한다고 들었는데
또 다른 3D 애니메이션 데모입니다. 우주에 떠서 쉬지 않고 회전하고 회전하는 플랫폼(?). Scott R McGann의 이 최면 데모도 바닐라 JavaScript와 캔버스로 코딩되어 있습니다.
무드보드
Hannah는 웹용 이미지 갤러리로도 사용할 수 있는 이 보드를 공유했습니다. 애니메이션과 전환이 거의 없어 고등학교/대학교 분위기가 물씬 풍깁니다… 향수를 불러일으킨 사람 있나요?
3D 공간 스크롤 줌
더 많은 3D CSS! (이달의 목록에는 확실히 패턴이 있습니다.) 스크롤 기반 애니메이션과 3D 번역 및 불투명도를 결합하면 순수 CSS에서 이러한 멋진 효과가 생성됩니다. Adam Argyle의 훌륭한 데모입니다.
루브 골드버그 HTML 양식
Ksenia Kondrashova가 깔끔하게 구현한 재미있는 아이디어입니다. 양식을 작성하면 제출 버튼이 더 가까이 보이도록 장치가 이동합니다. 기계는 실용적이지 않을 수도 있지만 형태를 다르게 만들어 주며 감탄을 자아냅니다.
배지에서 문자 메시지 미리보기
Jon Kantner의 또 다른 구성요소입니다. 이는 데이터를 표시하는 흥미로운 방법입니다. 메시지가 있다는 것을 알 수 있을 뿐만 아니라 배지 위로 마우스를 가져가면 메시지를 읽을 수도 있습니다. 이는 모바일(호버 효과가 어려운 경우)을 넘어 웹 알림에도 유용할 수 있습니다.
회전목마
목록을 마무리하면서 이번에는 Vicio Bonura가 만든 또 다른 3D CSS 데모가 있습니다. 그는 코드가 간단하고 따라하기 쉽기 때문에 다른 캐러셀을 생성하는 템플릿으로 도움이 될 수 있는 CSS 캐러셀을 만들었습니다.
위 내용은 멋진 CodePen 데모(8월 4일)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!