순수한 CSS3를 사용하여 매우 아름답고 실용적인 로딩 아이콘 만들기
- 高洛峰원래의
- 2016-10-14 15:32:052069검색
先来一张各种效果的预览图，其实代码并不复杂，关键看自己如何运用。
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="demo.css"/>
<link rel="stylesheet" type="text/css" href="loaders.css"/>
<title>css3炫酷页面加载动画特效代码 </title>
</head>
<body>
<main>
<div class="loaders">
<div class="loader">
<div class="loader-inner ball-pulse">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-grid-pulse">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-clip-rotate">
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-clip-rotate-pulse">
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner square-spin">
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-clip-rotate-multiple">
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-pulse-rise">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-rotate">
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner cube-transition">
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-zig-zag">
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-zig-zag-deflect">
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-triangle-path">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-scale">
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner line-scale-party">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-scale-multiple">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-pulse-sync">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-beat">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner line-scale-pulse-out">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner line-scale-pulse-out-rapid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-scale-ripple">
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-scale-ripple-multiple">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-spin-fade-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner line-spin-fade-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner triangle-skew-spin">
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner pacman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner ball-grid-beat">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="loader">
<div class="loader-inner semi-circle-spin">
<div></div>
</div>
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('main').className += 'loaded';
});
</script>
</body>
</html>css：demo
/**
*
*
*/
html, body {
padding: 0;
margin: 0;
height: 100%;
font-size: 16px;
background: #000;
color: #fff;
font-family: 'Source Sans Pro';
}
h1 {
font-size: 2.8em;
font-weight: 700;
letter-spacing: -1px;
margin: 0.6rem 0;
}
h1 > span {font-weight: 300; }
h2 {
font-size: 1.15em;
font-weight: 300;
margin: 0.3rem 0;
}
main {
width: 95%;
max-width: 1000px;
margin: 4em auto;
opacity: 0;
}
main.loaded {transition: opacity .25s linear;opacity: 1; }
main header {width: 100%; }
main header > div {width: 50%; }
main header > .left, main header > .right {height: 100%; }
main .loaders {
width: 100%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
}
main .loaders .loader {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 25%;
max-width: 25%;
height: 200px;
align-items: center;
justify-content: center;
}css：loaders
/** *
* 모든 애니메이션은 자체 파일에 있어야 합니다.
* 애니메이션 디렉토리에 포함되며
* 여기.
*
*/
/** * 여러 애니메이션에서 공유하는 스타일
*/
@-webkit-keyframes 배율 {
0% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 1; }
45% {
-webkit-transform: scale(0.1);
변환: scale(0.1);
불투명도: 0.7; }
80% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 1; } }
@keyframes 배율 {
0% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 1; }
45% {
-webkit-transform: scale(0.1);
변환: scale(0.1);
불투명도: 0.7; }
80% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 1; } }
.ball-pulse > div:nth-child(0) {
-webkit-animation: 0.75초 0초 무한 큐빅 베지어(.2, .68, .18, 1.08);
애니메이션: 0.75초 0초 무한 큐빅-베지어(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(1) {
-webkit-animation: 0.75초 0.12초 무한 큐빅 베지어(.2, .68, .18, 1.08);
애니메이션: 0.75초 0.12초 무한 큐빅-베지어(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(2) {
-webkit-animation: 0.75초 0.24초 무한 큐빅 베지어(.2, .68, .18, 1.08);
애니메이션: 0.75초 0.24초 무한 큐빅-베지어(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(3) {
-webkit-animation: 0.75초 0.36초 무한 큐빅 베지어(.2, .68, .18, 1.08);
애니메이션: 0.75초 0.36초 무한 큐빅-베지어(.2, .68, .18, 1.08); }
.ball-pulse > div {
배경색: #fff;
너비: 15px;
높이: 15px;
테두리 반경: 100%;
여백: 2px;
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
디스플레이: 인라인 블록; }
@-webkit-keyframes ball-pulse-sync {
33% {
-webkit-transform: translateY(10px);
변환: translateY(10px); }
66% {
-webkit-transform: translateY(-10px);
변환: translateY(-10px); }
100% {
-webkit-transform: translateY(0);
변환: translateY(0); } }
@keyframes ball-pulse-sync {
33% {
-webkit-transform: translateY(10px);
변환: translateY(10px); }
66% {
-webkit-transform: translateY(-10px);
변환: translateY(-10px); } 100% {
-webkit-transform: translateY(0);
변환: translateY(0); } }
.ball-pulse-sync > div:nth-child(0) {
-webkit-animation: ball-pulse-sync 0.6s 0s 무한 ease-in-out;
애니메이션: ball-pulse-sync 0.6s 0s 무한 ease-in-out; }
.ball-pulse-sync > div:nth-child(1) {
-webkit-animation: ball-pulse-sync 0.6초 0.07초 무한 ease-in-out;
애니메이션: ball-pulse-sync 0.6초 0.07초 무한 Ease-in-out; }
.ball-pulse-sync > div:nth-child(2) {
-webkit-animation: ball-pulse-sync 0.6s 0.14s 무한 ease-in-out;
애니메이션: ball-pulse-sync 0.6s 0.14s 무한 ease-in-out; }
.ball-pulse-sync > div:nth-child(3) {
-webkit-animation: ball-pulse-sync 0.6s 0.21s 무한 ease-in-out;
애니메이션: ball-pulse-sync 0.6초 0.21초 무한 Ease-in-out; }
.ball-pulse-sync > div {
배경색: #fff;
너비: 15px;
높이: 15px;
테두리 반경: 100%;
여백: 2px;
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
디스플레이: 인라인 블록; }
@-webkit-keyframes 볼 스케일 {
0% {
-webkit-transform: scale(0);
변환: scale(0); }
100% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 0; } }
@keyframes 볼 스케일 {
0% {
-webkit-transform: scale(0);
변환: scale(0); }
100% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 0; } }
.ball-scale > div {
배경색: #fff;
너비: 15px;
높이: 15px;
테두리 반경: 100%;
여백: 2px;
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
디스플레이: 인라인 블록;
높이: 60px;
너비: 60px;
-webkit-animation: 볼 스케일 1초 0초 ease-in-out 무한;
애니메이션: 볼 스케일 1초 0초 ease-in-out 무한; }
@-webkit-keyframes 회전 {
0% {
-webkit-transform: 회전(0deg);
변환: 회전(0deg); }
50% {
-webkit-transform: 회전(180deg);
변환: 회전(180deg); }
100% {
-webkit-transform: 회전(360deg);
변환: 회전(360도); } }
@keyframes 회전 {
0% {
-webkit-transform: 회전(0deg);
변환: 회전(0deg); }
50% {
-webkit-transform: 회전(180deg);
변환: 회전(180deg); }
100% {
-webkit-transform: 회전(360deg);
변환: 회전(360도); } }
.ball-회전 {
위치: 상대적; } .ball-rotate > div {
배경색: #fff;
너비: 15px;
높이: 15px;
테두리 반경: 100%;
여백: 2px;
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
위치: 상대적; }
.ball-rotate > div:first-child {
-webkit-animation: 1초 0초 cubic-bezier(.7, -.13, .22, .86) 무한 회전;
애니메이션: 1초 0초 cubic-bezier(.7, -.13, .22, .86) 무한 회전; }
.ball-rotate > div:이전, .ball-rotate > div:이후 {
배경색: #fff;
너비: 15px;
높이: 15px;
테두리 반경: 100%;
여백: 2px;
콘텐츠: "";
위치: 절대;
불투명도: 0.8; }
.ball-rotate > div:앞에 {
상단: 0px;
왼쪽: -28px; }
.ball-rotate > div:after {
상단: 0px;
왼쪽: 25px; }
@keyframes 회전 {
0% {
-webkit-transform: 회전(0deg) 배율(1);
변환: 회전(0deg) 스케일(1); }
50% {
-webkit-transform: 회전(180deg) 배율(0.6);
변환: 회전(180deg) 배율(0.6); }
100% {
-webkit-transform: 회전(360deg) 배율(1);
변환: 회전(360deg) 배율(1); } }
.ball-clip-rotate > div {
배경색: #fff;
너비: 15px;
높이: 15px;
테두리 반경: 100%;
여백: 2px;
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
테두리: 2px 단색 #fff;
테두리 하단 색상: 투명;
높이: 25px;
너비: 25px;
배경: 투명 !중요;
디스플레이: 인라인 블록;
-webkit-animation: 0.75초 0초 선형 무한 회전;
애니메이션: 0.75초 0초 선형 무한 회전; }
@keyframes 회전 {
0% {
-webkit-transform: 회전(0deg) 배율(1);
변환: 회전(0deg) 스케일(1); }
50% {
-webkit-transform: 회전(180deg) 배율(0.6);
변환: 회전(180deg) 배율(0.6); }
100% {
-webkit-transform: 회전(360deg) 배율(1);
변환: 회전(360deg) 배율(1); } }
@keyframes 배율 {
30% {
-webkit-transform: scale(0.3);
변환: scale(0.3); }
100% {
-webkit-transform: scale(1);
변환: scale(1); } }
.ball-clip-rotate-pulse {
위치: 상대적;
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
변환: translateY(-15px); } .ball-clip-rotate-pulse > div {
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
위치: 절대;
상단: 0px;
왼쪽: 0px;
테두리 반경: 100%; }
.ball-clip-rotate-pulse > div:first-child {
배경: #fff;
높이: 16px;
너비: 16px;
상단: 9px;
왼쪽: 9px;
-webkit-animation: 1초 0초 cubic-bezier(.09, .57, .49, .9) 무한대 확장;
애니메이션: 1초 0초 cubic-bezier(.09, .57, .49, .9) 무한대; }
.ball-clip-rotate-pulse > div:last-child {
위치: 절대;
테두리: 2px 단색 #fff;
너비: 30px;
높이: 30px;
배경: 투명;
테두리: 2px 단색;
border-color: #fff 투명 #fff 투명;
-webkit-animation: 1초 0초 cubic-bezier(.09, .57, .49, .9) 무한 회전;
애니메이션: 1초 0초 cubic-bezier(.09, .57, .49, .9) 무한 회전;
-webkit-animation-duration: 1초;
애니메이션 지속 시간: 1초; }
@keyframes 회전 {
0% {
-webkit-transform: 회전(0deg) 배율(1);
변환: 회전(0deg) 스케일(1); }
50% {
-webkit-transform: 회전(180deg) 배율(0.6);
변환: 회전(180deg) 배율(0.6); }
100% {
-webkit-transform: 회전(360deg) 배율(1);
변환: 회전(360deg) 배율(1); } }
.ball-clip-rotate-multiple {
위치: 상대적; }
.ball-clip-rotate-multiple > div {
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
위치: 절대;
왼쪽: 0px;
상단: 0px;
테두리: 2px 단색 #fff;
테두리 하단 색상: 투명;
테두리 상단 색상: 투명;
테두리 반경: 100%;
높이: 35px;
너비: 35px;
-webkit-animation: 1초 0초 ease-in-out 무한 회전;
애니메이션: 1초 0초 ease-in-out 무한 회전; }
.ball-clip-rotate-multiple > div:last-child {
디스플레이: 인라인 블록;
상단: 10px;
왼쪽: 10px;
너비: 15px;
높이: 15px;
-webkit-animation-duration: 0.5초;
애니메이션 지속 시간: 0.5초;
테두리 색상: #fff 투명 #fff 투명;
-webkit-animation-direction: 역방향;
애니메이션 방향: 역방향; }@-webkit-keyframes ball-scale-ripple {
0% {
-webkit-transform: scale(0.1);
변환: scale(0.1);
불투명도: 1; }
70% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 0.7; }
100% {
불투명도: 0.0; } }
@keyframes 볼 스케일-리플 {
0% {
-webkit-transform: scale(0.1);
변환: scale(0.1);
불투명도: 1; }
70% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 0.7; }
100% {
불투명도: 0.0; } }
.ball-scale-ripple > div {
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
높이: 50px;
너비: 50px;
테두리 반경: 100%;
테두리: 2px 단색 #fff;
-webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8);
애니메이션: 볼 스케일 리플 1초 0초 무한 큐빅 베지어(.21, .53, .56, .8); }
@-webkit-keyframes ball-scale-ripple-multiple {
0% {
-webkit-transform: scale(0.1);
변환: scale(0.1);
불투명도: 1; }
70% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 0.7; }
100% {
불투명도: 0.0; } }
@keyframes 볼 스케일-리플-다중 {
0% {
-webkit-transform: scale(0.1);
변환: scale(0.1);
불투명도: 1; }
70% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 0.7; }
100% {
불투명도: 0.0; } }
.ball-scale-ripple-multiple {
위치: 상대적;
-webkit-transform: translateY(-25px);
-ms-transform: translateY(-25px);
변환: translateY(-25px); }
.ball-scale-ripple-multiple > div:nth-child(0) {
-webkit-animation-delay: -0.2초;
애니메이션 지연: -0.2초; }
.ball-scale-ripple-multiple > div:nth-child(1) {
-webkit-animation-delay: 0초;
애니메이션 지연: 0초; }
.ball-scale-ripple-multiple > div:nth-child(2) {
-webkit-animation-delay: 0.2초;
애니메이션 지연: 0.2초; }
.ball-scale-ripple-multiple > div:nth-child(3) {
-webkit-animation-delay: 0.4초;
애니메이션 지연: 0.4초; } .ball-scale-ripple-multiple > div {
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
위치: 절대;
상단: 0;
왼쪽: 0;
너비: 50px;
높이: 50px;
테두리 반경: 100%;
테두리: 2px 단색 #fff;
-webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
애니메이션: 볼 스케일 리플 다중 1.25초 0초 무한 입방 베지어(.21, .53, .56, .8); }
@-webkit-keyframes 볼비트 {
50% {
불투명도: 0.2;
-webkit-transform: scale(0.75);
변환: scale(0.75); }
100% {
불투명도: 1;
-webkit-transform: scale(1);
변환: scale(1); } }
@keyframes 볼비트 {
50% {
불투명도: 0.2;
-webkit-transform: scale(0.75);
변환: scale(0.75); }
100% {
불투명도: 1;
-webkit-transform: scale(1);
변환: scale(1); } }
.ball-beat > div {
배경색: #fff;
너비: 15px;
높이: 15px;
테두리 반경: 100%;
여백: 2px;
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
디스플레이: 인라인 블록;
-webkit-animation: 볼비트 0.7초 0초 무한 선형;
애니메이션: 볼 비트 0.7초 0초 무한 선형; }
.ball-beat > div:nth-child(2n-1) {
-webkit-animation-delay: 0.35초 !중요;
애니메이션 지연: 0.35초 !중요; }
@-webkit-keyframes ball-scale-multiple {
0% {
-webkit-transform: scale(0);
변환: scale(0);
불투명도: 0; }
5% {
불투명도: 1; }
100% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 0; } }
@keyframes 볼 스케일 다중 {
0% {
-webkit-transform: scale(0);
변환: scale(0);
불투명도: 0; }
5% {
불투명도: 1; }
100% {
-webkit-transform: scale(1);
변환: scale(1);
불투명도: 0; } }
.ball-scale-multiple {
위치: 상대적;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
변환: translateY(-30px); }
.ball-scale-multiple > div:nth-child(2) {
-webkit-animation-delay: 0.2초;
애니메이션 지연: 0.2초; }
.ball-scale-multiple > div:nth-child(3) {
-webkit-animation-delay: 0.4초;
애니메이션 지연: 0.4초; } .ball-scale-multiple > div {
배경색: #fff;
너비: 15px;
높이: 15px;
테두리 반경: 100%;
여백: 2px;
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
위치: 절대;
왼쪽: 0px;
상단: 0px;
불투명도: 0;
여백: 0;
너비: 60px;
높이: 60px;
-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
애니메이션: 볼 스케일 다중 1s 0s 선형 무한대; }
@-webkit-keyframes ball-triangle-path-1 {
33% {
-webkit-transform: translate(25px, -50px);
변환: 번역(25px, -50px); }
66% {
-webkit-transform: translate(50px, 0px);
변환: 번역(50px, 0px); }
100% {
-webkit-transform: translate(0px, 0px);
변환: 번역(0px, 0px); } }
@keyframes ball-triangle-path-1 {
33% {
-webkit-transform: translate(25px, -50px);
변환: 번역(25px, -50px); }
66% {
-webkit-transform: translate(50px, 0px);
변환: 번역(50px, 0px); }
100% {
-webkit-transform: translate(0px, 0px);
변환: 번역(0px, 0px); } }
@-webkit-keyframes ball-triangle-path-2 {
33% {
-webkit-transform: translate(25px, 50px);
변환: 번역(25px, 50px); }
66% {
-webkit-transform: 번역(-25px, 50px);
변환: 번역(-25px, 50px); }
100% {
-webkit-transform: translate(0px, 0px);
변환: 번역(0px, 0px); } }
@keyframes ball-triangle-path-2 {
33% {
-webkit-transform: translate(25px, 50px);
변환: 번역(25px, 50px); }
66% {
-webkit-transform: 번역(-25px, 50px);
변환: 번역(-25px, 50px); }
100% {
-webkit-transform: translate(0px, 0px);
변환: 번역(0px, 0px); } }
@-webkit-keyframes ball-triangle-path-3 {
33% {
-webkit-transform: 번역(-50px, 0px);
변환: 번역(-50px, 0px); }
66% {
-webkit-transform: 번역(-25px, -50px);
변환: 번역(-25px, -50px); }
100% {
-webkit-transform: translate(0px, 0px);
변환: 번역(0px, 0px); } }
@keyframes ball-triangle-path-3 {
33% {
-webkit-transform: 번역(-50px, 0px);
변환: 번역(-50px, 0px); } 66% {
-webkit-transform: 번역(-25px, -50px);
변환: 번역(-25px, -50px); }
100% {
-webkit-transform: translate(0px, 0px);
변환: 번역(0px, 0px); } }
.ball-삼각형 경로 {
위치: 상대적;
-webkit-transform: 번역(-25px, -25px);
-ms-transform: 번역(-25px, -25px);
변환: 번역(-25px, -25px); }
.ball-triangle-path > div:nth-child(1) {
-webkit-animation-name: ball-triangle-path-1;
애니메이션 이름: ball-triangle-path-1;
-webkit-animation-delay: 0;
애니메이션 지연: 0;
-webkit-animation-duration: 2초;
애니메이션 지속 시간: 2초;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 무한;
animation-iteration-count: 무한; }
.ball-triangle-path > div:nth-child(2) {
-webkit-animation-name: ball-triangle-path-2;
애니메이션 이름: ball-triangle-path-2;
-webkit-animation-delay: 0;
애니메이션 지연: 0;
-webkit-animation-duration: 2초;
애니메이션 지속 시간: 2초;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 무한;
animation-iteration-count: 무한; }
.ball-triangle-path > div:nth-child(3) {
-webkit-animation-name: ball-triangle-path-3;
애니메이션 이름: ball-triangle-path-3;
-webkit-animation-delay: 0;
애니메이션 지연: 0;
-webkit-animation-duration: 2초;
애니메이션 지속 시간: 2초;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 무한;
animation-iteration-count: 무한; }
.ball-triangle-path > div {
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
위치: 절대;
너비: 10px;
높이: 10px;
테두리 반경: 100%;
테두리: 1px 단색 #fff; }
.ball-triangle-path > div:nth-of-type(1) {
상단: 50px; }
.ball-triangle-path > div:nth-of-type(2) {
왼쪽: 25px; }
.ball-triangle-path > div:nth-of-type(3) {
상단: 50px;
왼쪽: 50px; }
@-webkit-keyframes ball-pulse-rise-even {
0% {
-webkit-transform: scale(1.1);
변환: scale(1.1); } 25% {
-webkit-transform: translateY(-30px);
변환: translateY(-30px); }
50% {
-webkit-transform: scale(0.4);
변환: scale(0.4); }
75% {
-webkit-transform: translateY(30px);
변환: translateY(30px); }
100% {
-webkit-transform: translateY(0);
변환: translateY(0);
-webkit-transform: scale(1);
변환: scale(1); } }
@keyframes ball-pulse-rise-even {
0% {
-webkit-transform: scale(1.1);
변환: scale(1.1); }
25% {
-webkit-transform: translateY(-30px);
변환: translateY(-30px); }
50% {
-webkit-transform: scale(0.4);
변환: scale(0.4); }
75% {
-webkit-transform: translateY(30px);
변환: translateY(30px); }
100% {
-webkit-transform: translateY(0);
변환: translateY(0);
-webkit-transform: scale(1);
변환: scale(1); } }
@-webkit-keyframes ball-pulse-rise-odd {
0% {
-webkit-transform: scale(0.4);
변환: scale(0.4); }
25% {
-webkit-transform: translateY(30px);
변환: translateY(30px); }
50% {
-webkit-transform: scale(1.1);
변환: scale(1.1); }
75% {
-webkit-transform: translateY(-30px);
변환: translateY(-30px); }
100% {
-webkit-transform: translateY(0);
변환: translateY(0);
-webkit-transform: scale(0.75);
변환: scale(0.75); } }
@keyframes ball-pulse-rise-odd {
0% {
-webkit-transform: scale(0.4);
변환: scale(0.4); }
25% {
-webkit-transform: translateY(30px);
변환: translateY(30px); }
50% {
-webkit-transform: scale(1.1);
변환: scale(1.1); }
75% {
-webkit-transform: translateY(-30px);
변환: translateY(-30px); }
100% {
-webkit-transform: translateY(0);
변환: translateY(0);
-webkit-transform: scale(0.75);
변환: scale(0.75); } }.ball-pulse-rise > div {
배경색: #fff;
너비: 15px;
높이: 15px;
테두리 반경: 100%;
여백: 2px;
-webkit-animation-fill-mode: 둘 다;
animation-fill-mode: 둘 다;
디스플레이: 인라인 블록;
-webkit-animation-duration: 1초;
애니메이션 지속 시간: 1초;
-webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6);
애니메이션 타이밍 기능: cubic-bezier(.15, .46, .9, .6);
-webkit-animation-iteration-count: 무한;
animation-iteration-count: 무한;
-webkit-animation-delay: 0;
애니메이션 지연: 0; }
.ball-pulse-rise > div:nth-child(2n) {
-webkit-animation-name: ball-pulse-rise-even;
애니메이션 이름: ball-pulse-rise-even; }
.ball-pulse-rise > div:nth-child(2n-1) {
-webkit-animation-name: ball-pulse-rise-odd;
애니메이션 이름: ball-pulse-rise-odd; }
@-webkit-keyframes 볼 그리드 비트 {
50% {
불투명도: 0.7; }
100% {
불투명도: 1; } }
@keyframes 볼 그리드 비트 {
50% {
불투명도: 0.7; }
100% {
불투명도: 1; } }
.ball-grid-beat {
너비: 57px; }
.ball-grid-beat > div:nth-child(1) {
-webkit-animation-delay: 0.36초;
애니메이션 지연: 0.36초;
-webkit-animation-duration: 0.96초;
애니메이션 지속 시간: 0.96초; }
.ball-grid-beat > div:nth-child(2) {
-webkit-animation-delay: 0.4초;
애니메이션 지연: 0.4초;
-webkit-animation-duration: 0.93초;
애니메이션 지속 시간: 0.93초; }
.ball-grid-beat > div:nth-child(3) {
-webkit-animation-delay: 0.68초;
애니메이션 지연: 0.68초;
-webkit-animation-duration: 1.19초;
애니메이션 지속 시간: 1.19초; }
.ball-grid-beat > div:nth-child(4) {
-webkit-animation-delay: 0.41초;
애니메이션 지연: 0.41초;
-webkit-animation-duration: 1.13초;
애니메이션 지속 시간: 1.13초; }
.ball-grid-beat > div:nth-child(5) {
-webkit-animation-delay: 0.71초;
애니메이션 지연: 0.71초;
-webkit-animation-duration: 1.34초;
애니메이션 지속 시간: 1.34초; }
.ball-grid-beat > div:nth-child(6) {
&nbs성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3 3D 효과 및 애니메이션 학습다음 기사：CSS3 3D 효과 및 애니메이션 학습