HTML+CSS로 페이지 로딩(로딩) 애니메이션 효과 구현-CSS 튜토리얼-php.cn

HTML+CSS로 페이지 로딩(로딩) 애니메이션 효과 구현

yulia

풀어 주다： 2018-10-16 17:15:49

원래의

9852명이 탐색했습니다.

페이지를 탐색할 때 페이지가 로드되는 상황을 겪은 적이 있나요? 프런트엔드 개발자로서 CSS3 및 HTML을 사용하여 페이지 로딩 애니메이션 효과를 만드는 방법을 알고 있나요? 이 기사에서는 매우 간단하고 실용적인 CSS3 원 로딩 애니메이션 효과 코드를 공유할 것입니다. 여기에는 특정 참조 가치가 있으며 관심 있는 친구들이 살펴볼 수 있습니다.

로딩 애니메이션을 구현하려면 애니메이션, 디스플레이, 테두리 반경 둥근 모서리, 변환 속성 등과 같은 CSS3의 많은 속성과 HTML 태그를 사용해야 합니다. 확실하지 않은 경우 이전 게시물을 확인하실 수 있습니다. . 이전에 소개된 기사를 보시거나 CSS3 비디오 튜토리얼을 방문하세요.

예제 데모: 세 개의 원을 사용하여 페이지 로딩 애니메이션 효과를 만듭니다. 원은 숨김에서 표시 후 숨김으로 변경됩니다. 구체적인 코드는 다음과 같습니다.

HTML 부분:

<div class="spinner">
     <div class="bounce1"></div>
    <div class="bounce2"></div>
     <div class="bounce3"></div>
</div>

로그인 후 복사

CSS3 부분:

.spinner {
     margin: 100px auto 0;
     width: 150px;
     text-align: center;
   }
    
   .spinner > div {
     width: 30px;
     height: 30px;
     background-color: #67CF22;
    
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
     animation: bouncedelay 1.4s infinite ease-in-out;
     /* Prevent first frame from flickering when animation starts */
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
    
   .spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
   }
    
   .spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
   }
    
   @-webkit-keyframes bouncedelay {
     0%, 80%, 100% { -webkit-transform: scale(0.0) }
     40% { -webkit-transform: scale(1.0) }
   }
    
   @keyframes bouncedelay {
     0%, 80%, 100% {
       transform: scale(0.0);
       -webkit-transform: scale(0.0);
     } 40% {
       transform: scale(1.0);
       -webkit-transform: scale(1.0);
     }
   }

로그인 후 복사

효과

HTML+CSS로 페이지 로딩(로딩) 애니메이션 효과 구현