> 웹 프론트엔드 > CSS 튜토리얼 > CSS3를 사용하여 페이지 서클 로딩 애니메이션을 만드는 방법(코드 포함)

CSS3를 사용하여 페이지 서클 로딩 애니메이션을 만드는 방법(코드 포함)

yulia
풀어 주다: 2018-10-13 10:25:48
원래의
3702명이 탐색했습니다.

페이지를 열 때 페이지가 로드되는 상황에 자주 직면하게 됩니다. 프런트엔드 엔지니어로서 CSS3를 사용하여 페이지 로딩 애니메이션 효과를 얻는 방법을 알고 계십니까? 이 기사에서는 멋진 원 로딩 애니메이션 효과에 대한 코드를 공유할 것입니다. 여기에는 특정 참조 값이 있으며 관심 있는 친구들이 살펴볼 수 있습니다.

페이지 로딩 애니메이션을 만들려면 애니메이션 속성, 위치 위치 지정, 테두리 반경 필렛, 변형 속성 등과 같은 CSS3의 많은 속성을 사용해야 합니다. 불분명한 경우 소개한 이전 기사를 읽어보세요. 미리 숙지하거나 CSS3 동영상 튜토리얼을 방문하세요. 이는 기본 사항이므로 반드시 숙지해야 합니다.

예: 원 로딩 애니메이션 효과를 만듭니다. 로딩 시 원의 크기가 작은 것에서 큰 것으로 변경되고, 색상이 밝은 것에서 어두운 것으로 변경됩니다.

HTML 부분:

<div class="loader">
      <div class="loading">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>     
      </div>
  </div>
로그인 후 복사

CSS 부분:

.loader{
       width: 300px;
       border: 1px solid #ccc;
       height: 200px;
       display: flex;
       box-sizing: border-box;
       align-items: center;
       justify-content: center;
   }   
   @-webkit-keyframes loading{
       50%{
           transform: scale(0.4);
           opacity: 0.3;
       }
       100%{
           transform: scale(1);
           opacity: 1;
       }
   }
   .loading{
       position: relative;
   }
   .loading i{
       display: block;
       width: 15px;
       height: 15px;
       border-radius: 50%;
       position: absolute;
       background: #333;
   }
   .loading i:nth-child(1){
       top: 25px;
       left: 0;
       -webkit-animation: loading 1s ease 0s infinite;
   }
   .loading i:nth-child(2){
       top: 17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.12s infinite;
   }
   .loading i:nth-child(3){
       top: 0;
       left: 25px;
       -webkit-animation: loading 1s ease 0.24s infinite;
   }
   .loading i:nth-child(4){
       top: -17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.36s infinite;
   }
   .loading i:nth-child(5){
       top: -25px;
       left: 0;
       -webkit-animation: loading 1s ease 0.48s infinite;
   }
   .loading i:nth-child(6){
       top: -17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.6s infinite;
   }
   .loading i:nth-child(7){
       top: 0;
       left: -25px;
       -webkit-animation: loading 1s ease 0.72s infinite;
   }
   .loading i:nth-child(8){
       top: 17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.84s infinite;   
   }
로그인 후 복사

Rendering:

CSS3를 사용하여 페이지 서클 로딩 애니메이션을 만드는 방법(코드 포함)

위 코드는 페이지 로딩 애니메이션 효과를 얻기 위해 공유됩니다CSS3는 프로젝트에서 자주 사용되며 직접 사용해 볼 수도 있습니다. 다른 효과를 작성할 수 있는지 확인해 보세요. 이 기사가 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼

을 방문하세요.

위 내용은 CSS3를 사용하여 페이지 서클 로딩 애니메이션을 만드는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿