웹 프론트 엔드 개발 과정에서 웹마스터로서 페이지가 로드될 때 로드 대기 중인 스타일을 표시하기 위해 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 코드 효과는 다음과 같습니다.
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); } }
효과는 다음과 같습니다.
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 로딩에 대한 이번 글의 구체적인 코드 예시 소개입니다. 도움이 필요한 친구에게 도움이 되십시오.
참고, CSS3 로딩 제작과 관련된 속성 소개:
CSS3 애니메이션 속성, 약어 속성을 사용하여 애니메이션을
transform 속성은 요소에 2D 또는 3D 변환을 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다.
@keyframes 속성은 @keyframes 규칙을 통해 애니메이션을 만들 수 있습니다. 애니메이션은 한 CSS 스타일 세트를 다른 스타일 세트로 점진적으로 변경하여 생성됩니다. 애니메이션 중에 이 CSS 스타일 세트를 여러 번 변경할 수 있습니다. 변경이 발생하는 시점을 백분율로 지정하거나 0% 및 100%에 해당하는 "from" 및 "to" 키워드를 통해 지정합니다. 0%는 애니메이션의 시작 시간이고, 100%는 애니메이션의 종료 시간입니다. 최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택기를 정의해야 합니다.
위 내용은 웹페이지가 로드될 때 CSS 스타일 효과를 얻는 방법은 무엇입니까? (다양한 스타일의 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!