CSS3로 페이지 로딩 효과를 얻는 방법
- 清浅원래의
- 2018-11-29 13:54:174272검색
CSS3로 페이지 로딩 효과를 얻는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 div를 만들고 마지막으로 변환 시 애니메이션 애니메이션과 2D 크기 조정 변환을 통해 페이지 로딩 효과를 얻습니다.
이 기사의 운영 환경: 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로 페이지 로딩 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!