지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

몇 가지 일반적인 로딩 효과 구현

php中世界最好的语言
풀어 주다： 2017-11-29 15:02:02
원래의
3988명이 탐색했습니다.

이번에는 몇 가지 일반적인 로딩 효과 구현에 대해 이야기하고, 로딩 효과 구현 시 주의해야 할 사항은 다음과 같습니다. 

<html>
       <head>
              <meta charset="UTF-8">
              <title>Loading</title>
              <link rel="stylesheet" type="text/css" href="loading.css">
              <style>
                     .loader {
                            float: left;
                     }
                    
                     .loader {
                            position: relative;
                            width: 5rem;
                            height: 5rem;
                     }
                    
                     .loader.small {
                            -webkit-transform: scale(.5);
                            transform: scale(.5);
                     }
                    
                     .loader.circle-line,
                     .loader.circle-round {
                            height: 5rem;
                     }
                     /*circle-line*/
                    
                     .loader.circle-line span {
                            position: absolute;
                            display: inline-block;
                            width: 1.5rem;
                            height: .5rem;
                            border-top-left-radius: .25rem;
                            border-bottom-left-radius: .25rem;
                            background: #1ABC9C;
                            opacity: .05;
                            -webkit-animation: circle-line 1s ease infinite;
                            animation: circle-line 1s ease infinite;
                     }
                    
                     .loader.circle-line span:nth-child(1) {
                            top: 50%;
                            left: 0;
                            margin-top: -.25rem;
                            -webkit-animation-delay: .13s;
                            animation-delay: .13s;
                     }
                    
                     .loader.circle-line span:nth-child(2) {
                            top: 1rem;
                            left: .5rem;
                            -webkit-transform: rotate(45deg);
                            transform: rotate(45deg);
                            -webkit-animation-delay: .26s;
                            animation-delay: .26s;
                     }
                    
                     .loader.circle-line span:nth-child(3) {
                            left: 50%;
                            top: .5rem;
                            margin-left: -.75rem;
                            -webkit-transform: rotate(90deg);
                            transform: rotate(90deg);
                            -webkit-animation-delay: .39s;
                            animation-delay: .39s;
                     }
                    
                     .loader.circle-line span:nth-child(4) {
                            right: .5rem;
                            top: 1rem;
                            -webkit-transform: rotate(145deg);
                            transform: rotate(145deg);
                            -webkit-animation-delay: .52s;
                            animation-delay: .52s;
                     }
                    
                     .loader.circle-line span:nth-child(5) {
                            left: 3.5rem;
                            top: 50%;
                            margin-top: -.25rem;
                            -webkit-transform: rotate(180deg);
                            transform: rotate(180deg);
                            -webkit-animation-delay: .65s;
                            animation-delay: .65s;
                     }
                    
                     .loader.circle-line span:nth-child(6) {
                            bottom: 1rem;
                            right: .5rem;
                            -webkit-transform: rotate(-145deg);
                            transform: rotate(-145deg);
                            -webkit-animation-delay: .78s;
                            animation-delay: .78s;
                     }
                    
                     .loader.circle-line span:nth-child(7) {
                            left: 50%;
                            bottom: .5rem;
                            margin-left: -15px;
                            -webkit-transform: rotate(-90deg);
                            transform: rotate(-90deg);
                            -webkit-animation-delay: .91s;
                            animation-delay: .91s;
                     }
                    
                     .loader.circle-line span:nth-child(8) {
                            bottom: 1rem;
                            left: .5rem;
                            -webkit-transform: rotate(-45deg);
                            transform: rotate(-45deg);
                            -webkit-animation-delay: 1.04s;
                            animation-delay: 1.04s;
                     }
                    
                     @keyframes circle-line {
                            0% {
                                   opacity: .05;
                            }
                            100% {
                                   opacity: .7;
                            }
                     }
                    
                     @-webkit-keyframes circle-line {
                            0% {
                                   opacity: .05;
                            }
                            100% {
                                   opacity: .7;
                            }
                     }
                     /*circle-line-spin*/
                    
                     .loader.circle-line-spin .circle-line-inner {
                            width: 100%;
                            height: 100%;
                            -webkit-animation: circle-line-spin 1.5s linear infinite;
                            animation: circle-line-spin 1.5s linear infinite;
                     }
                    
                     .loader.circle-line-spin span {
                            position: absolute;
                            display: inline-block;
                            width: 1.5rem;
                            height: .5rem;
                            border-top-left-radius: .25rem;
                            border-bottom-left-radius: .25rem;
                            background: #1ABC9C;
                            opacity: .7;
                     }
                    
                     .loader.circle-line-spin span:nth-child(1) {
                            top: 50%;
                            left: 0;
                            margin-top: -.25rem;
                     }
                    
                     .loader.circle-line-spin span:nth-child(2) {
                            top: 1rem;
                            left: .5rem;
                            -webkit-transform: rotate(45deg);
                            transform: rotate(45deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(3) {
                            left: 50%;
                            top: .5rem;
                            margin-left: -.75rem;
                            -webkit-transform: rotate(90deg);
                            transform: rotate(90deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(4) {
                            right: .5rem;
                            top: 1rem;
                            -webkit-transform: rotate(145deg);
                            transform: rotate(145deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(5) {
                            left: 3.5rem;
                            top: 50%;
                            margin-top: -.25rem;
                            -webkit-transform: rotate(180deg);
                            transform: rotate(180deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(6) {
                            bottom: 1rem;
                            right: .5rem;
                            -webkit-transform: rotate(-145deg);
                            transform: rotate(-145deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(7) {
                            left: 50%;
                            bottom: .5rem;
                            margin-left: -15px;
                            -webkit-transform: rotate(-90deg);
                            transform: rotate(-90deg);
                     }
                    
                     .loader.circle-line-spin span:nth-child(8) {
                            bottom: 1rem;
                            left: .5rem;
                            -webkit-transform: rotate(-45deg);
                            transform: rotate(-45deg);
                     }
                    
                     @keyframes circle-line-spin {
                            0% {
                                   transform: rotate(0);
                            }
                            100% {
                                   transform: rotate(360deg);
                            }
                     }
                    
                     @-webkit-keyframes circle-line-spin {
                            0% {
                                   -webkit-transform: rotate(0);
                            }
                            100% {
                                   -webkit-transform: rotate(360deg);
                            }
                     }
                     /*circle-round*/
                    
                     .loader.circle-round span {
                            opacity: .05;
                            -webkit-animation: circle-round 1s ease infinite;
                            animation: circle-round 1s ease infinite;
                     }
                    
                     .loader.circle-round-fade span {
                            -webkit-animation: circle-round-fade 1s ease infinite;
                            animation: circle-round-fade 1s ease infinite;
                     }
                    
                     .loader.circle-round span,
                     .loader.circle-round-fade span {
                            position: absolute;
                            width: .8rem;
                            height: .8rem;
                            display: inline-block;
                            border-radius: 50%;
                            background: #1ABC9C;
                     }
                    
                     .loader.circle-round span:nth-child(1),
                     .loader.circle-round-fade span:nth-child(1) {
                            top: 50%;
                            left: 0;
                            margin-top: -.4rem;
                            -webkit-animation-delay: -1.04s;
                            animation-delay: -1.04s;
                     }
                    
                     .loader.circle-round span:nth-child(2),
                     .loader.circle-round-fade span:nth-child(2) {
                            top: .7rem;
                            left: .7rem;
                            -webkit-animation-delay: -.91s;
                            animation-delay: -.91s;
                     }
                    
                     .loader.circle-round span:nth-child(3),
                     .loader.circle-round-fade span:nth-child(3) {
                            top: 0;
                            left: 50%;
                            margin-left: -.4rem;
                            -webkit-animation-delay: -.78s;
                            animation-delay: -.78s;
                     }
                    
                     .loader.circle-round span:nth-child(4),
                     .loader.circle-round-fade span:nth-child(4) {
                            right: .7rem;
                            top: .7rem;
                            -webkit-animation-delay: -.65s;
                            animation-delay: -.65s;
                     }
                    
                     .loader.circle-round span:nth-child(5),
                     .loader.circle-round-fade span:nth-child(5) {
                            right: 0;
                            top: 50%;
                            margin-top: -.4rem;
                            -webkit-animation-delay: -.52s;
                            animation-delay: -.52s;
                     }
                    
                     .loader.circle-round span:nth-child(6),
                     .loader.circle-round-fade span:nth-child(6) {
                            bottom: .7rem;
                            right: .7rem;
                            -webkit-animation-delay: -.39s;
                            animation-delay: -.39s;
                     }
                    
                     .loader.circle-round span:nth-child(7),
                     .loader.circle-round-fade span:nth-child(7) {
                            bottom: 0;
                            left: 50%;
                            margin-left: -.4rem;
                            -webkit-animation-delay: -.26s;
                            animation-delay: -.26s;
                     }
                    
                     .loader.circle-round span:nth-child(8),
                     .loader.circle-round-fade span:nth-child(8) {
                            left: .7rem;
                            bottom: .7rem;
                            -webkit-animation-delay: -.13s;
                            animation-delay: -.13s;
                     }
                    
                     @keyframes circle-round {
                            0% {
                                   opacity: .05;
                            }
                            100% {
                                   opacity: .7;
                            }
                     }
                    
                     @-webkit-keyframes circle-round {
                            0% {
                                   opacity: .05;
                            }
                            100% {
                                   opacity: .7;
                            }
                     }
                    
                     @keyframes circle-round-fade {
                            0% {
                                   opacity: .25;
                                   transform: scale(.2);
                            }
                            100% {
                                   opacity: 1;
                                   transform: scale(1);
                            }
                     }
                    
                     @-webkit-keyframes circle-round-fade {
                            0% {
                                   opacity: .25;
                                   transform: scale(.2);
                            }
                            100% {
                                   opacity: 1;
                                   transform: scale(1);
                            }
                     }
                     /*line-square*/
                    
                     .loader.line-square {
                            width: 6rem;
                            height: .8rem;
                     }
                    
                     .loader.line-square span {
                            position: absolute;
                            top: 0;
                            width: .8rem;
                            height: .8rem;
                            display: inline-block;
                            background: #1ABC9C;
                            -webkit-animation: line-square 1s ease infinite;
                            animation: line-square 1s ease infinite;
                     }
                    
                     .loader.line-square span:nth-child(1) {
                            left: 0;
                            -webkit-animation-delay: .13s;
                            animation-delay: .13s;
                     }
                    
                     .loader.line-square span:nth-child(2) {
                            left: 1.3rem;
                            -webkit-animation-delay: .26s;
                            animation-delay: .26s;
                     }
                    
                     .loader.line-square span:nth-child(3) {
                            left: 2.6rem;
                            -webkit-animation-delay: .39s;
                            animation-delay: .39s;
                     }
                    
                     .loader.line-square span:nth-child(4) {
                            left: 3.9rem;
                            -webkit-animation-delay: .52s;
                            animation-delay: .52s;
                     }
                    
                     .loader.line-square span:nth-child(5) {
                            left: 5.2rem;
                            -webkit-animation-delay: .65s;
                            animation-delay: .65s;
                     }
                    
                     @keyframes line-square {
                            0% {
                                   opacity: 1;
                                   transform: scale(1.2);
                                   -webkit-transform: scale(1.2);
                            }
                            100% {
                                   opacity: .2;
                                   transform: scale(.2);
                                   -webkit-transform: scale(.2);
                            }
                     }
                    
                     @-webkit-keyframes line-square {
                            0% {
                                   opacity: 1;
                                   transform: scale(1.2);
                                   -webkit-transform: scale(1.2);
                            }
                            100% {
                                   opacity: .2;
                                   transform: scale(.2);
                                   -webkit-transform: scale(.2);
                            }
                     }
                     /*line-round*/
                    
                     .loader.line-round {
                            width: 6rem;
                            height: .8rem;
                     }
                    
                     .loader.line-round span {
                            position: absolute;
                            top: 0;
                            width: .8rem;
                            height: .8rem;
                            border-radius: 50%;
                            display: inline-block;
                            background: #1ABC9C;
                            -webkit-animation: line-round 1s ease infinite;
                            animation: line-round 1s ease infinite;
                     }
                    
                     .loader.line-round span:nth-child(1) {
                            left: 0;
                            -webkit-animation-delay: .13s;
                            animation-delay: .13s;
                     }
                    
                     .loader.line-round span:nth-child(2) {
                            left: 1.3rem;
                            -webkit-animation-delay: .26s;
                            animation-delay: .26s;
                     }
                    
                     .loader.line-round span:nth-child(3) {
                            left: 2.6rem;
                            -webkit-animation-delay: .39s;
                            animation-delay: .39s;
                     }
                    
                     .loader.line-round span:nth-child(4) {
                            left: 3.9rem;
                            -webkit-animation-delay: .52s;
                            animation-delay: .52s;
                     }
                    
                     .loader.line-round span:nth-child(5) {
                            left: 5.2rem;
                            -webkit-animation-delay: .65s;
                            animation-delay: .65s;
                     }
                    
                     @keyframes line-round {
                            0% {
                                   opacity: 1;
                                   transform: scale(1.2);
                                   -webkit-transform: scale(1.2);
                            }
                            100% {
                                   opacity: .2;
                                   transform: scale(.2);
                                   -webkit-transform: scale(.2);
                            }
                     }
                    
                     @-webkit-keyframes line-round {
                            0% {
                                   opacity: 1;
                                   transform: scale(1.2);
                                   -webkit-transform: scale(1.2);
                            }
                            100% {
                                   opacity: .2;
                                   transform: scale(.2);
                                   -webkit-transform: scale(.2);
                            }
                     }
                     /*line-bounce*/
                    
                     .loader.line-bounce {
                            width: 6rem;
                            height: 2.5rem;
                     }
                    
                     .loader.line-bounce span {
                            position: absolute;
                            top: 0;
                            width: .5rem;
                            height: 2.5rem;
                            border-radius: 5px;
                            display: inline-block;
                            background: #1ABC9C;
                            -webkit-animation: line-bounce 1s ease infinite;
                            animation: line-bounce 1s ease infinite;
                     }
                    
                     .loader.line-bounce span:nth-child(1) {
                            left: 0;
                            -webkit-animation-delay: -.65s;
                            animation-delay: -.65s;
                     }
                    
                     .loader.line-bounce span:nth-child(2) {
                            left: 1.3rem;
                            -webkit-animation-delay: -.78s;
                            animation-delay: -.78s;
                     }
                    
                     .loader.line-bounce span:nth-child(3) {
                            left: 2.6rem;
                            -webkit-animation-delay: -.91s;
                            animation-delay: -.91s;
                     }
                    
                     .loader.line-bounce span:nth-child(4) {
                            left: 3.9rem;
                            -webkit-animation-delay: -.78s;
                            animation-delay: -78s;
                     }
                    
                     .loader.line-bounce span:nth-child(5) {
                            left: 5.2rem;
                            -webkit-animation-delay: -.65s;
                            animation-delay: -.65s;
                     }
                    
                     @keyframes line-bounce {
                            0% {
                                   transform: scaleY(1);
                            }
                            50% {
                                   transform: scaleY(.3);
                            }
                            100% {
                                   transform: scaleY(1);
                            }
                     }
                    
                     @-webkit-keyframes line-bounce {
                            0% {
                                   -webkit-transform: scaleY(1);
                            }
                            50% {
                                   -webkit-transform: scaleY(.3);
                            }
                            100% {
                                   -webkit-transform: scaleY(1);
                            }
                     }
                     /*circle-spin*/
                    
                     .loader.circle-spin {
                            border-radius: 50%;
                            border: .2rem solid rgba(0, 0, 0, .05);
                            width: 4rem;
                            height: 4rem;
                            box-sizing: content-box;
                     }
                    
                     .loader.circle-spin .loader-placeholder {
                            position: absolute;
                            top: -.2rem;
                            left: -.2rem;
                            border-radius: 50%;
                            border: .2rem solid transparent;
                            border-top: .2rem solid #1ABC9C;
                            width: 4rem;
                            height: 4rem;
                            box-sizing: content-box;
                            -webkit-animation: circle-spin 1s ease infinite;
                            animation: circle-spin 1s ease infinite;
                     }
                    
                     @keyframes circle-spin {
                            0% {
                                   transform: rotate(0);
                            }
                            100% {
                                   transform: rotate(360deg);
                            }
                     }
                    
                     @-webkit-keyframes circle-spin {
                            0% {
                                   -webkit-transform: rotate(0);
                            }
                            100% {
                                   -webkit-transform: rotate(360deg);
                            }
                     }
              </style>
       </head>
 
       <body>
              <div>
                     <div class="loader circle-line small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader circle-line-spin small">
                            <div>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                                   <span></span>
                            </div>
                     </div>
                     <div class="loader circle-round small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader circle-round-fade small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader line-square small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader line-round small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader line-bounce small">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                     </div>
                     <div class="loader circle-spin small">
                            <div></div>
                     </div>
              </div>
 
       </body>
</html>
로그인 후 복사


이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

HTML5 반응형 배너 제작 튜토리얼

H5를 사용하여 물방울 특수 효과를 만드는 튜토리얼

HTML 웹페이지 최적화 및 압축을 구현하는 단계

위 내용은 몇 가지 일반적인 로딩 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
实现 效果
원천：php.cn
이전 기사：HTML에서 3D 서스펜션 효과를 구현하는 단계 다음 기사：Tuniu Travel Network 광고를 모방하기 위한 애니메이션 특수 효과 튜토리얼
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1913
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2087
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1756
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1656
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1665
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿