집 > 기사 > 웹 프론트엔드 > CSS3를 사용하여 8개 그룹의 매우 멋진 마우스 오버 그림 애니메이션 구현

CSS3를 사용하여 8개 그룹의 매우 멋진 마우스 오버 그림 애니메이션 구현

不言원래의: 2018-06-26 11:42:281787검색

이 기사에서는 주로 멋진 순수 CSS3 마우스 오버 그림 애니메이션 효과 8세트를 공유합니다. 각 애니메이션 효과는 매우 흥미롭고 배울 가치가 있습니다. 관심 있는 친구들이 참고할 수 있습니다.

이것은 정말 멋진 순수 CSS3 마우스입니다. -그림 위에 애니메이션 효과. 8개의 서로 다른 효과 그룹으로 나누어져 있으며 마우스를 그림 위로 이동할 때 마스크 레이어와 그림 제목이 서로 다른 방식으로 표시됩니다. 각 효과 세트는 3가지의 서로 다른 마우스 오버 사진 효과로 구분됩니다.

그림 위로 마우스를 슬라이드할 때 나타나는 애니메이션 효과는 모두 CSS3를 사용하여 수행됩니다. 여기에는 슬라이딩 효과, 기울기 효과, 뒤집기 효과, 회전 효과 등이 포함됩니다. 아래는 GIF 미리보기 그림입니다.

Usage

페이지에 hover- Effects.css 파일을 추가하세요.

<link rel="stylesheet" href="css/hover-effects.css" />

HTML 구조

마우스 오버 사진 애니메이션 효과 중 하나를 예로 들면 HTML 구조는 다음과 같습니다.

<p class="effect-1">
   <p class="image-box">
      <img src="img-2.jpg" alt="Image-3">
   </p>
   <p class="text-desc">
      <h3>Your Title</h3>
      <p>......</p>
      <a href="#" class="btn">Learn more</a>
   </p>
</p>

CSS 스타일

.effect-1{   
  float: left;    
  width: 340px;    
  position: relative;    
  overflow: hidden;    
  text-align: center;    
  border: 4px solid rgba(255, 255, 255, 0.9);    
  overflow: visible;   
}   
.effect-1 img{   
  transition: 0.5s;   
}   
.effect-1:hover img{   
  transform: scale(0.3) translateY(-110%);   
  position: relative;    
  z-index: 9;   
} .effect-1 .text-desc{   
  transform: translateY(100%);    
  opacity: 0;    
  padding: 85px 20px 10px;    
  transition: 0.5s;   
} .effect-1:hover .text-desc{   
  transform: translateY(0px);    
  opacity: 1;   
}

위 내용은 이 글의 전체 내용입니다. , 모두에게 도움이 되길 바랍니다. 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목해주세요!

CSS3를 사용하여 8개 그룹의 매우 멋진 마우스 오버 그림 애니메이션 구현

관련 기사