초보자를 위한 간단한 카드 호버 애니메이션

3280 단어 beginnerscardwebdesigncss3
html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다.

1단계: 마크업 즉, HTML 작성

부모 래퍼와 일부 텍스트 콘텐츠를 포함하는 자식이 필요합니다. 좋아 보이는 한 당신의 선택의 무엇이든 될 수 있습니다.

 <body>
   <div class="parent">
     <div class="child-text">
       Hi there! Howdy? I am fine. Fun fact? I use vanilla css for most of my projects because I love it!! 
   </div>
 </body>


2단계: 기본 재설정 및 스타일링을 바디에 추가합니다. 코드는 codepen으로 작성되었으므로 마크업에 대한 메타 태그가 없습니다.

/* resets */
*,{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
/* styles for the body */
body{
  height:100vh;
  width:100vw;
  overflow:hidden;
  display:grid;
  place-content:center;
  background:#000000;
}


본문은 콘텐츠 중앙에 그리드로 표시됩니다. transform 속성이나 flexbox를 사용하여 래퍼 div를 중앙에 배치할 수도 있습니다.

3단계: 하위 div를 포함하는 상위 div를 디자인하는 방법을 주의 깊게 살펴보십시오. 임의의 배경 이미지가 있으며 원하는 이미지나 색상 또는 그라데이션 배경을 사용할 수 있습니다.
  • 위치는 ** 상대적 **이며 매우 중요합니다. 알게 될 것입니다!
  • 오버플로 **는 **숨겨져 있습니다. 하위 div가 Y축에서 아래쪽으로 이동하므로 오버플로를 숨깁니다.

    • .parent {
  height:20rem;
  width:20rem;
  overflow:hidden;
 position:relative; 
  border-radius:10px;
  background:url('https://media.istockphoto.com/photos/clouds-on-sky-picture-id184103864?k=20&m=184103864&s=612x612&w=0&h=m1yaRvpLy-e76e6ZbX2QkCbsGFhubVaaDntDOpL2zYE=') no-repeat center/cover;
  cursor:pointer;
  text-align:center;
}


    *4단계 *: 검정색 오버레이를 사용합니다. 하위 div(투명한 배경)의 텍스트가 오버레이와 대비를 갖기를 원하기 때문입니다.
  • 이를 위해 의사 클래스 이전에 사용하고 있습니다. 이것은 위치를 절대값으로 하고 검은색 배경을 갖게 됩니다(불투명도가 매우 낮음).

    • .parent::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:-1;
  background:rgb(0,0,0,0.4);
}


    5단계: 이제 이 카드 애니메이션의 주인공인 자식 div의 스타일을 지정합니다.
  • 이 div는 어떤 식으로든 스타일을 지정할 수 있습니다. 기억해야 할 유일한 것은 **transform 속성 **이 있다는 것입니다. 이 div를 임의의 방향으로 명시적으로 변환합니다. 여기서는 -Y축에서 15rem만큼 변환했습니다.

    • /* the child container with the text */
.child-text{
  margin-top:4rem;
  font-size:1.5rem;
  color:white;
  text-shadow:1px 0 1px black;
  padding:1rem;
  transition:transform 500ms ;
  transform:translateY(15rem);
  cursor:pointer;
}


    6단계: 거의 끝났습니다! 이제 우리가 가진 것은 상위 div 위로 마우스를 가져가면 하위 div를 올바르게 배치하는 것입니다.
    부모가 가리키면 자식은 y 축에서 0으로 변환하는 변환 속성을 갖습니다. 이렇게 하면 자식이 팝업됩니다. 효과를 늦추기 위해 500ms의 전환을 사용했습니다.

    .parent:hover .child-text{
  transform:translateY(0rem);
}


    7단계: 카드를 준비하기 전에 상위 div에 멋진 기능을 추가해 보겠습니다. 그림자와 상자 그림자를 추가했으며 테두리 또는 새로운 배경색을 사용할 수도 있습니다.

    .parent:hover{
  border-radius:10px;
  box-shadow:0 0 10px white;
  filter:drop-shadow(0 1px 2px black);
  transform:scale(0.98);
}


    8단계: 카드를 완성했습니다. 와, 정말 많았죠? 😅 잘하는 유일한 방법은 연습하는 것입니다. 이 코드로 실험해 보면 여기저기서 약간의 변경으로 매끄러운 애니메이션을 만들 수 있는 방법에 놀라게 될 것입니다!

    새롭고 유용한 것을 가르칠 수 있기를 바랍니다. 이 글을 읽고 있다면 CSS를 처음 접하고 아름다운 프로젝트에 도움이 필요한 친구들과 공유하세요. 행복한 CSS'ing!! ❤
    실습 프로젝트를 통한 JavaScript Dom 조작에 대한 최고의 가이드
    접두사 및 의사 상태 유틸리티가 포함된 TailwindCSS `gotcha`.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage