순수 CSS3 멋진 기사 카드 UI 디자인 효과

간략한 튜토리얼

순수한 CSS3를 사용하여 만든 멋진 기사 카드 UI 디자인 효과입니다. 기사 카드에는 그림자 효과가 있습니다. 카드 위에 마우스를 올리면 기사 설명 정보가 슬라이드 애니메이션으로 카드에 표시됩니다.

HTML 구조 사용 방법

카드의 HTML 구조는 다음과 같습니다.

<div class="tile"> 
    <img src="img/1.jpg"/>
    <div class="text">
    <h1>文章标题</h1>
    <h2 class="animate-text">文章子标题</h2>
    <p class="animate-text">文章的描述信息</p>
    <div class="dots">
        <span></span>
        <span></span>
        <span></span>
    </div>
  </div>
</div>

CSS 스타일

전체 카드 포장 컨테이너는 레이아웃을 위해 flex로 시작됩니다.

.wrap{
  margin:50px auto 60px auto;
  width:100%;
  display:flex;
  align-items:space-around;
  max-width:1200px;
}

각 카드의 너비와 높이는 380픽셀로 설정되어 있습니다. 그리고 box-shadow 속성을 사용하여 카드에 큰 그림자 효과를 설정하고, 모든 애니메이션에 대한 완화 효과를 위한 전환 애니메이션을 설정합니다.

.tile{
  width:380px;
  height:380px;
  margin:10px;
  background-color:#99aeff;
  display:inline-block;
  background-size:cover;
  position:relative;
  cursor:pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
  overflow:hidden;
  color:white;
  font-family:'Microsoft YaHei',sans-serif;
}

카드의 이미지는 너비와 높이가 100%인 절대 위치 지정을 사용하여 전체 카드를 차지합니다.

.tile img{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  transition: all 0.4s ease-out;
}

카드의 텍스트 레이어 페이지는 절대 위치 지정을 사용하며 텍스트는 z-index 속성을 통해 이미지 위에 배치됩니다. h2 텍스트와 p 텍스트는translateX 함수를 통해 -200% 이동됩니다. 즉, 카드 외부로 이동되어 처음에는 보이지 않습니다.

rree

카드 위에 마우스를 올리면 카드의 그림자가 수정되어 카드가 1.05배로 확대됩니다. 카드 내 이미지의 투명도는 0.2로 설정되고, 텍스트는 원래 위치로 돌아가며, 투명도는 1로 설정됩니다.

.tile .text{
  z-index:99;
  position:absolute;
  padding:30px;
  height:calc(100% - 60px);
}
.tile h1{
  font-weight:300;
  margin:0;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile h2{
  font-weight:100;
  margin:20px 0 0 0;
  font-style:italic;
   transform: translateX(200px);
}
.tile p{
  font-weight:300;
  margin:20px 0 0 0;
  line-height: 25px;
  transform: translateX(-200px);
  transition-delay: 0.2s;
}
.animate-text{
  opacity:0;
  transition: all 0.6s ease-in-out;
}

위 내용은 CSS3, 기사 카드, UI 디자인 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!