CSS3로 페이지 로딩 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS3로 페이지 로딩 효과를 얻는 방법

清浅

풀어 주다： 2021-04-20 15:13:38

원래의

4280명이 탐색했습니다.

CSS3로 페이지 로딩 효과를 얻는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 div를 만들고 마지막으로 변환 시 애니메이션 애니메이션과 2D 크기 조정 변환을 통해 페이지 로딩 효과를 얻습니다.

CSS3로 페이지 로딩 효과를 얻는 방법

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

페이지 로딩 애니메이션을 다양한 모양으로 만들 수 있습니다. 오늘 공유하고 싶은 사례는 애니메이션을 원형으로 만들어서 페이지를 로딩하는 경우입니다. 브라우저 호환성 문제에 주의하세요

자세한 설명 지식 포인트

(1) animation: 애니메이션 속성 설정

animation-name: 선택기에 바인딩되어야 하는 키프레임 이름을 설정합니다. 이 예제는

animation-duration을 로드해야 합니다. 애니메이션을 완료하는 데 걸리는 시간(초 또는 밀리초)입니다.

애니메이션 타이밍 기능: 애니메이션 속도 곡선.

animation-delay: 애니메이션이 시작되기 전의 지연 시간입니다.

animation-iteration-count: 애니메이션을 재생해야 하는 횟수입니다.

animation-direction: 애니메이션을 차례로 역방향으로 재생할지 여부입니다.

예: 로드할 애니메이션 이름 설정, 애니메이션 완료에 필요한 시간은 1.4초, 시작 및 종료는 저속, 무한 루프 재생

animation: load 1.4s infinite ease-in-out;

로그인 후 복사

(2) animation-fill-mode 속성

none: 기본 동작을 변경하지 마십시오.

forwards: 애니메이션이 완료되면 마지막 속성 값(마지막 키프레임에 정의됨)을 유지합니다.

backwards: animation-delay로 지정된 기간 동안 애니메이션이 표시되기 전에 시작 속성 값(첫 번째 키프레임에 정의됨)을 적용합니다.

both: 앞으로 채우기 모드와 뒤로 채우기 모드가 모두 적용됩니다.

(3) 변환: scale(x,y) 2D 스케일링 변환.

전체 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.load {
  margin:300px auto;
  width: 150px;
  text-align: center;
}
.load div{
  width: 30px;
  height: 30px;
  background-color:rgb(118,224,250);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: load 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;

}
.load .circle1 {
  -webkit-animation-delay: -0.32s;
}
.load .circle2 {
  -webkit-animation-delay: -0.16s;
}
@-webkit-keyframes load {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
</style>
</head>
<body>
<div class="load">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</body>
</html>

로그인 후 복사

요약: 위 내용은 이 글의 요약입니다. 이것이 전부입니다. 이 기사의 내용을 통해 CSS3 애니메이션에 대해 어느 정도 이해하고 원하는 페이지 로딩 스타일을 만들 수 있기를 바랍니다.

위 내용은 CSS3로 페이지 로딩 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!