HTML 및 CSS가 포함된 애니메이션 영화 카드

현대 웹 디자인에서는 인터랙티브 구성 요소가 필수적입니다. 이 블로그에서는 HTML과 CSS를 사용하여 세련되고 애니메이션이 있는 영화 카드를 만드는 방법을 안내합니다. 초보자나 (중급 개발자)라도 이 프로젝트는 프론트엔드 기술을 연습하기에 적합합니다.

시작해 보세요!

1단계: 파일 설정

기본 프로젝트 구조를 만드는 것부터 시작해 보겠습니다. 콘텐츠용 HTML 파일과 스타일 지정용 CSS 파일이 필요합니다.

2단계: HTML

영화 카드의 기본 구조는 다음과 같습니다. 각 카드에는 다음이 포함됩니다.

• 영화 포스터 이미지.
• 제목 상자 오버레이
• 마우스를 올리면 대화형으로 표시되는 영화 이름입니다.

<div>



<p>Step 3: CSS</p>

<p>Now let’s style the page to make it visually appealing and interactive. We’ll focus on the layout, hover effects, and overall aesthetics.</p>

<p><strong>Basic Page Styling</strong></p>

<p>We begin with some global styles to center the content and set the background theme.<br>
</p>

<pre class="brush:php;toolbar:false">@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");

body {
  display: grid;
  height: 100vh;
  place-items: center;
  font-family: "Noto Sans", sans-serif;
  background: #282634;
}

기본 CSS: 이 CSS는 각 영화 카드의 레이아웃과 애니메이션을 처리합니다.

.content__shows {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.content__shows div {
  position: relative;
  width: 200px;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto;
}
.content__shows div:hover img {
  transform: scale(1.15);
}
.content__shows div .title-box {
  content: "";
  height: 100px;
  position: absolute;
  transform: translatey(50px);
  transition: 0.3s ease;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
  width: 100%;
  z-index: 1;
}
.content__shows div img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: 0.3s ease;
}
.content__shows div .name {
  position: absolute;
  width: 100%;
  bottom: 10px;
  color: #fff;
  transform: translatey(50px);
  padding: 10px;
  z-index: 10;
  transition: .3s ease;
  cursor: default;
}
.content__shows div:hover .name,
.content__shows div:hover .title-box {
  transform: translatey(0);
}

이 프로젝트의 코드펜은 다음과 같습니다

결론

HTML과 CSS를 사용하여 애니메이션 영화 카드를 성공적으로 만들었습니다. 이 컨셉은 프로젝트, 제품 또는 강조하고 싶은 모든 것을 소개하는 데에도 사용할 수 있습니다.

읽어주셔서 감사합니다! ?

위 내용은 HTML 및 CSS가 포함된 애니메이션 영화 카드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!