> 웹 프론트엔드 > CSS 튜토리얼 > 프로젝트 확장 카드 - 나의 &#일 단위 프로젝트&# 여정

프로젝트 확장 카드 - 나의 &#일 단위 프로젝트&# 여정

WBOY
풀어 주다: 2024-08-22 08:32:06
원래의
1089명이 탐색했습니다.

Project Expanding Cards - My

이것은 "50일 안에 50개 프로젝트" 과정의 프로젝트 1/50 쇼케이스입니다. 지난 50일 동안(또는 그보다 약간 더 많은 프로젝트를 완료했지만!) ), 제 방식대로 하고 싶었어요. 프로젝트의 주요 아이디어나 주요 컨셉을 제대로 이해하고, 장단점을 보고, 심지어 다음 단계로 나아가고 싶었어요.

이 프로젝트의 주요 아이디어는 클릭 시 확장되는 여러 개의 카드(또는 패널)를 만드는 것이었습니다. 매우 간단하지만 여기에는 구현할 수 있는 다른 항목이 많이 있습니다.

  • Popover API를 사용하면 마우스 클릭 대신 패널을 확장할 수 있습니다.
  • Unsplash API에서 이미지를 가져오는 중입니다.
  • 마우스 움직임과 상호 작용하는 패널 만들기
  • webkit-box-reflect를 사용하여 각 패널 아래에 반사를 추가합니다.
  • 각 패널에 색상 그림자 추가(SVG 필터 사용)

이런 것들을 구현한 후 이 프로젝트는 미학과 함께 단순함 속에 복잡함을 보여주는 다음 단계로 발전했습니다. 앞으로 컬러 샘플링 기능을 적용할 수도 있을 것 같습니다!.

여러분의 의견, 제안, 생각을 듣고 싶습니다. 좋아요와 팔로우도 잊지 마세요.

나의 50일 프로젝트 50일 여정 레포
트위터로 연락주세요
Linkedin에서 저에게 연락하세요

위 내용은 프로젝트 확장 카드 - 나의 &#일 단위 프로젝트&# 여정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿