Pure CSS3는 페이지 서클 로딩 애니메이션 특수 효과를 실현합니다.-CSS 튜토리얼-php.cn

Pure CSS3는 페이지 서클 로딩 애니메이션 특수 효과를 실현합니다.

yulia

풀어 주다： 2019-11-30 16:36:14

원래의

11274명이 탐색했습니다.

인터넷 속도가 좋지 않을 때 웹사이트를 열거나 동영상을 시청할 때 페이지가 매우 느리게 로드됩니다. 이때 일반적으로 사용자에게 "페이지를 로드하는 중입니다. 잠시 기다려 주세요"라는 메시지가 표시되며 원이 나타납니다. 계속 회전하는 거죠. HTML과 CSS를 배우는 친구들, CSS3를 사용하여 원 로딩 애니메이션 효과를 얻을 수 있나요? 이 글은 순수 CSS3로 구현된 애니메이션 특수 효과를 로딩하는 원(로딩)을 여러분과 공유할 것입니다. 관심 있는 친구들이 참고할 수 있습니다.

원 로딩 효과를 만들기 위해 CSS3를 사용하려면 애니메이션, 키프레임, 테두리 반경 필렛 등과 같은 CSS3의 많은 속성을 사용해야 합니다. 이러한 속성에 대해 명확하지 않은 경우 다음 페이지의 관련 기사를 참조할 수 있습니다. 또는 CSS3 비디오 튜토리얼을 방문하세요.

다음으로 HTML과 CSS를 사용하여 페이지 서클 로딩 애니메이션을 만드는 방법에 대해 자세히 소개하겠습니다.

HTML 부분:

페이지에 서클 로딩 애니메이션을 배치할 div를 만들고 div에 CSS 스타일을 설정하는 데 편리한 클래스 이름입니다. 구체적인 코드는 다음과 같습니다.

<body>
  <h3>CSS圆圈加载样式</h3>  
  <div class="loading"></div>
</body>

로그인 후 복사

CSS 부분:

먼저 div의 길이와 높이를 120px로 설정한 다음 border-radius:를 50%로 설정합니다. 원형으로 만들고 border : 16px solid를 사용합니다. #f3f3f3원의 너비와 색상을 설정하고 마지막으로 border-top 속성을 통해 스크롤 가능한 부분을 설정합니다. 기본 스타일이 완성된 후 CSS3의 애니메이션 애니메이션을 사용하여 무한 루프로 회전하게 합니다. 구체적인 코드는 다음과 같습니다.

.loading {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
   }   
   @-webkit-keyframes spin {
    0% {
     -webkit-transform: rotate(0deg);
    }
    100% {
     -webkit-transform: rotate(360deg);
    }
   }   
   @keyframes spin {
    0% {
     transform: rotate(0deg);
    }
    100% {
     transform: rotate(360deg);
    }
   }

로그인 후 복사

참고: -webkit- 및 -ms- 접두사는 그렇지 않은 브라우저에 사용됩니다. 애니메이션 및 변환 속성을 지원하려면 브라우저 호환성을 보장해야 합니다.

렌더링:

Pure CSS3는 페이지 서클 로딩 애니메이션 특수 효과를 실현합니다.