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

페이지를 열 때 페이지가 로드되는 상황에 자주 직면하게 됩니다. 프런트엔드 엔지니어로서 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는 프로젝트에서 자주 사용되며 직접 사용해 볼 수도 있습니다. 다른 효과를 작성할 수 있는지 확인해 보세요. 이 기사가 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼

을 방문하세요.

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