CSS3만을 사용하여 파노라마 효과를 얻는 방법

이 기사에서는 CSS3 블랙 기술을 소개합니다. CSS만 사용하여 파노라마 효과를 얻는 방법

최종 효과 데모: demo 페이지 레이아웃

기본 스타일 및 애니메이션

<p class="panorama"></p>

　 background- size: auto 100%; 이 코드는 이미지의 높이가 컨테이너의 높이와 같고 가로 방향이 자동이라는 의미입니다. 즉, 이미지의 가장 왼쪽이 컨테이너의 왼쪽에 연결됩니다.

　애니메이션을 실행하는 과정은 순환, 교대, 선형이며 시간은 10초입니다.

　

애니메이션 실행 수동 제어

지금까지 웹 페이지를 열면 앞뒤로 수평 슬라이딩 효과가 있는 이미지가 즉시 나타납니다. . 그러나 이 경우 관람객들은 애니메이션에 매료되어 실제 내용을 무시할 수도 있다.

우리의 요구 사항은 마우스가 그림 위에 있을 때 움직이도록 하는 것입니다. 물론 이 효과는 매우 쉽게 얻을 수 있습니다.

　이전 애니메이션을 삭제하고 다음 스타일을 추가하세요.

.panorama {
  width: 300px;
  height: 300px;
  background-image: url(http://7vilbi.com1.z0.glb.clouddn.com/blog/6608185829213862083.jpg);
  background-size: auto 100%;
  cursor: pointer;
  animation: panorama 10s linear infinite alternate;
}

@keyframes panorama {
  to {
    background-position: 100% 0;
  }
}

현재 효과는 다음과 같습니다. 마우스를 그림 안으로 이동하면 그림이 가로로 앞뒤로 미끄러지기 시작합니다.

애니메이션 최적화

효과는 얻었지만 마우스가 사진 밖으로 나가면 사진이 즉시 원래 위치로 돌아갑니다 .

이것은 다소 갑작스러운 일입니다. 마우스가 안으로 움직일 때 그림의 현재 위치를 기록하고 애니메이션을 계속하는 방법은 무엇입니까?

이 속성을 사용할 수 있습니다 animation-play- 상태: 일시 중지됨 | 실행 중이며 애니메이션의 두 가지 상태인 일시 중지됨과 실행 중을 나타냅니다.

　 완전한 CSS 코드

.panorama:hover,
.panorama:focus {
  animation: panorama 10s linear infinite alternate;
}

위 내용은 CSS3만을 사용하여 파노라마 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!