Pure CSS3는 페이지 로딩 애니메이션 효과를 구현합니다(코드 포함).

페이지를 열 때 페이지가 로드되는 상황이 자주 발생합니다. 프런트엔드 개발자로서 CSS3를 사용하여 페이지 로딩 애니메이션 효과를 구현하는 방법을 알고 있나요? 이 기사에서는 멋지고 실용적인 CSS3 로딩 애니메이션 효과 코드를 공유할 것입니다. 여기에는 특정 참조 가치가 있으며 관심 있는 친구들이 살펴볼 수 있습니다.

페이지 로딩 로딩 애니메이션을 만들려면 애니메이션, 디스플레이, 변환 속성 등과 같은 CSS3의 많은 속성을 사용해야 합니다. 확실하지 않은 경우 이전에 소개한 이전 기사를 읽어보거나 CSS3를 방문하세요. 비디오 튜토리얼.

예시 데모: 원주형 애니메이션 로딩 효과를 만듭니다. 줄무늬는 긴 것에서 짧은 것, 그리고 더 길어집니다. 구체적인 코드는 다음과 같습니다.

HTML 부분:

<div class="box">
   <div class="r1"></div>
   <div class="r2"></div>
   <div class="r3"></div>
   <div class="r4"></div>
   <div class="r5"></div>
</div>

CSS 부분:

.box {
    margin: 100px auto;
    width: 50px;
    height: 60px;
   }   
   .box>div {
    background-color: #67CF22;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
   }   
   .box .r2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
   }   
   .box .r3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
   }   
   .box .r4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
   }   
   .box .r5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
   }   
   @-webkit-keyframes stretchdelay {
    0%,
    40%,
    100% {
     -webkit-transform: scaleY(0.4)
    }
    20% {
     -webkit-transform: scaleY(1.0)
    }
   }   
   @keyframes stretchdelay {
    0%,
    40%,
    100% {
     transform: scaleY(0.4);
     -webkit-transform: scaleY(0.4);
    }
    20% {
     transform: scaleY(1.0);
     -webkit-transform: scaleY(1.0);
    }
   }

효과는 다음과 같습니다. 그림:

위의 코드는 페이지 로딩 애니메이션 효과를 구현하기 위해 CSS3와 공유되었습니다. 이는 프로젝트에서 일반적으로 사용되며 직접 사용할 수도 있습니다. 다른 효과를 작성해 보세요. 이 기사가 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS3 온라인 매뉴얼

을 방문하세요.

위 내용은 Pure CSS3는 페이지 로딩 애니메이션 효과를 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!