CSS3에서 파노라마를 구현하는 방법

이 글에서는 주로 CSS3에서 파노라마 효과를 구현하기 위한 샘플 코드에 대한 관련 정보를 소개합니다. 편집자가 보기에 꽤 좋다고 생각해서 지금 공유하고 참고하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

기본 코드

html 코드:

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

먼저 몇 가지 기본 스타일과 애니메이션을 정의합니다.

.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;
  }
}

background-size: auto 100%; 그림의 높이가 컨테이너의 높이와 같고 수평 방향이 자동으로 이루어집니다. 즉, 그림의 가장 왼쪽이 컨테이너의 왼쪽에 부착됩니다. <code>background-size: auto 100%; 这段代码的意思是让图片的高等于容器的高，并且水平方向自动，即图片最左边贴着容器左侧。

执行动画的流程是：周而复始、往复交替、线性并且时间周期是10s。

手动控制动画执行

现在我们实现当鼠标悬浮于图片时才让它动起来，鼠标离开让它静止。

需要用到这个属性animation-play-state: paused | running，它表示动画的两个状态：暂停和运行

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

애니메이션 실행 수동 제어

이제 우리는 마우스를 그림 위로 가져가면 움직이고, 마우스를 멀리 움직이면 멈추는 것을 깨달았습니다.

애니메이션의 두 가지 상태인 paused 및 running을 나타내는 animation-play-state: Paused | running 속성을 ​​사용해야 합니다. .

전체 CSS 코드:

.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;
  animation-play-state: paused;
}

.panorama:hover,
.panorama:focus {
  animation-play-state: running;
}

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

관련 권장 사항: 🎜🎜🎜CSS3만 사용하여 파노라마 효과를 얻는 방법🎜🎜🎜🎜🎜🎜

위 내용은 CSS3에서 파노라마를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!