이 글에서는 주로 CSS3에서 구현한 10가지 로딩 효과를 자세히 소개합니다. 효과 구현은 간단하고 참신하며, 관심 있는 친구가 참고할 수 있습니다.
몇 가지 일반적인 로딩 효과는 CSS3를 사용하여 구현됩니다. 아주 간단합니다. 그래도 공유하고 메모를 합니다...
첫 번째 효과:
코드는 다음과 같습니다.
<p class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </p>
.loading{ width: 80px; height: 40px; margin: 0 auto; margin-top:100px; } .loading span{ display: inline-block; width: 8px; height: 100%; border-radius: 4px; background: lightgreen; -webkit-animation: load 1s ease infinite; } @-webkit-keyframes load{ 0%,100%{ height: 40px; background: lightgreen; } 50%{ height: 70px; margin: -15px 0; background: lightblue; } } .loading span:nth-child(2){ -webkit-animation-delay:0.2s; } .loading span:nth-child(3){ -webkit-animation-delay:0.4s; } .loading span:nth-child(4){ -webkit-animation-delay:0.6s; } .loading span:nth-child(5){ -webkit-animation-delay:0.8s; }
두 번째 효과:
코드는 다음과 같습니다.
<p class="loading"> <span></span> </p>
.loading{ width: 150px; height: 4px; border-radius: 2px; margin: 0 auto; margin-top:100px; position: relative; background: lightgreen; -webkit-animation: changeBgColor 1.04s ease-in infinite alternate; } .loading span{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: lightgreen; position: absolute; margin-top: -7px; margin-left:-8px; -webkit-animation: changePosition 1.04s ease-in infinite alternate; } @-webkit-keyframes changeBgColor{ 0%{ background: lightgreen; } 100%{ background: lightblue; } } @-webkit-keyframes changePosition{ 0%{ background: lightgreen; } 100%{ margin-left: 142px; background: lightblue; } }
3~5번째 효과:
코드는 다음과 같습니다.
<p class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </p>
3의 CSS 스타일 1~5번째 효과는 :
.loading{ width: 150px; height: 15px; margin: 0 auto; position: relative; margin-top:100px; } .loading span{ position: absolute; width: 15px; height: 100%; border-radius: 50%; background: lightgreen; -webkit-animation: load 1.04s ease-in infinite alternate; } @-webkit-keyframes load{ 0%{ opacity: 1; -webkit-transform: translate(0px); } 100%{ opacity: 0.2; -webkit-transform: translate(150px); } } .loading span:nth-child(1){ -webkit-animation-delay:0.13s; } .loading span:nth-child(2){ -webkit-animation-delay:0.26s; } .loading span:nth-child(3){ -webkit-animation-delay:0.39s; } .loading span:nth-child(4){ -webkit-animation-delay:0.52s; } .loading span:nth-child(5){ -webkit-animation-delay:0.65s; }
6~8번째 효과:
코드는 다음과 같습니다.
<p class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </p>
6~8번째의 CSS 스타일 효과는:
.loading{ width: 150px; height: 15px; margin: 0 auto; margin-top:100px; text-align: center; } .loading span{ display: inline-block; width: 15px; height: 100%; margin-right: 5px; background: lightgreen; -webkit-animation: load 1.04s ease infinite; } .loading span:last-child{ margin-right: 0px; } @-webkit-keyframes load{ 0%{ opacity: 1; } 100%{ opacity: 0; } } .loading span:nth-child(1){ -webkit-animation-delay:0.13s; } .loading span:nth-child(2){ -webkit-animation-delay:0.26s; } .loading span:nth-child(3){ -webkit-animation-delay:0.39s; } .loading span:nth-child(4){ -webkit-animation-delay:0.52s; } .loading span:nth-child(5){ -webkit-animation-delay:0.65s; }CODE는 다음과 같습니다.
R
<p class="loadEffect"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </p>ATSS 스타일은 다음과 같습니다. , 주로 애니메이션이 다르기 때문이지만 나중에 직접 사용하기 편리하므로 지금은 정리하지 않겠습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항: CSS는 둥근 모서리를 얻기 위해 Sprites 기술을 사용합니다.CSS3으로 제작된 약 20개의 로딩 애니메이션
위 내용은 CSS3로 구현된 10가지 로딩 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!