CSS3로 파노라마의 애니메이션 효과를 구현하는 방법(코드 포함)-CSS 튜토리얼-php.cn

CSS3로 파노라마의 애니메이션 효과를 구현하는 방법(코드 포함)

不言

풀어 주다： 2018-08-22 15:05:27

원래의

2731명이 탐색했습니다.

이 글의 내용은 CSS3에서 파노라마의 애니메이션 효과를 구현하는 방법에 대한 것입니다.(코드 포함) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

기본 코드

html 코드:

<div class="panorama"></div>

로그인 후 복사

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

.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%; 이 코드는 이미지의 높이를 컨테이너의 높이와 동일하게 만들고 가로 방향은 자동으로 즉, 이미지의 가장 왼쪽 부분이 컨테이너에 첨부된다는 의미입니다. 컨테이너의 왼쪽. background-size: auto 100%; 这段代码的意思是让图片的高等于容器的高，并且水平方向自动，即图片最左边贴着容器左侧。

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

手动控制动画执行

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

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

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

애니메이션 실행 수동 제어

이제 우리는 마우스가 그림 위에 있으면 움직이고, 마우스가 떠나면 멈추는 것을 깨달았습니다.

애니메이션의 두 가지 상태인 paused 및 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를 사용하여 이미지 캐러셀 효과를 얻는 방법#🎜 🎜# #🎜🎜##🎜🎜##🎜🎜#순수한 CSS를 사용하여 무지개 줄무늬 텍스트 효과를 얻는 방법(코드 포함) #🎜🎜##🎜🎜#

위 내용은 CSS3로 파노라마의 애니메이션 효과를 구현하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!