>  기사  >  웹 프론트엔드  >  웹페이지가 로드될 때 CSS 스타일 효과를 얻는 방법은 무엇입니까? (다양한 스타일의 예)

웹페이지가 로드될 때 CSS 스타일 효과를 얻는 방법은 무엇입니까? (다양한 스타일의 예)

藏色散人
藏色散人원래의
2018-08-13 09:49:285583검색

웹 프론트 엔드 개발 과정에서 웹마스터로서 페이지가 로드될 때 로드 대기 중인 스타일을 표시하기 위해 CSS를 사용하는 방법을 고려할 수 있습니다. 멋진 CSS 웹 페이지 로딩 애니메이션은 사용자의 기다리는 과정의 지루한 순간. 그럼 이번 글에서는 CSS 로딩 애니메이션 구현 방법을 소개하겠습니다.

페이지 로딩 스타일을 구현하는 순수 CSS 코드:

1. 바 웨이브 스타일의 CSS 로딩 애니메이션 코드 예시는 다음과 같습니다.

<div class="spinner">
  <div class="re1"></div>
  <div class="re2"></div>
  <div class="re3"></div>
  <div class="re4"></div>
  <div class="re5"></div>
</div>
.spinner {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
 
.spinner > 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;
}
 
.spinner .re2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .re3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .re4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .re5 {
  -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);
  }
}

The 코드 효과는 다음과 같습니다.

웹페이지가 로드될 때 CSS 스타일 효과를 얻는 방법은 무엇입니까? (다양한 스타일의 예)

2. 원형 루프 스타일의 CSS 로딩 애니메이션 코드 예는 다음과 같습니다.

.container1 > div, .container2 > div, .container3 > div {
  width: 6px;
  height: 6px;
  background-color: #333;
 
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
 
@-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);
  }
}

효과는 다음과 같습니다.

웹페이지가 로드될 때 CSS 스타일 효과를 얻는 방법은 무엇입니까? (다양한 스타일의 예)

3. 수평 도트의 CSS wave style 로딩 애니메이션 구현 코드 예시는 다음과 같습니다.

.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);
  }
}

효과는 다음과 같습니다.

웹페이지가 로드될 때 CSS 스타일 효과를 얻는 방법은 무엇입니까? (다양한 스타일의 예)

위는 다양한 스타일을 생성하기 위한 CSS 로딩에 대한 이번 글의 구체적인 코드 예시 소개입니다. 도움이 필요한 친구에게 도움이 되십시오.

참고, CSS3 로딩 제작과 관련된 속성 소개:

CSS3 애니메이션 속성, 약어 속성을 사용하여 애니메이션을

요소에 바인딩합니다.

transform 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.

@keyframes 속성은 @keyframes 규칙을 통해 애니메이션을 만들 수 있습니다. 애니메이션은 한 CSS 스타일 세트를 다른 스타일 세트로 점진적으로 변경하여 생성됩니다. 애니메이션 중에 이 CSS 스타일 세트를 여러 번 변경할 수 있습니다. 변경이 발생하는 시점을 백분율로 지정하거나 0% 및 100%에 해당하는 "from" 및 "to" 키워드를 통해 지정합니다. 0%는 애니메이션의 시작 시간이고, 100%는 애니메이션의 종료 시간입니다. 최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택기를 정의해야 합니다.





위 내용은 웹페이지가 로드될 때 CSS 스타일 효과를 얻는 방법은 무엇입니까? (다양한 스타일의 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.