0
로더를 만들어야합니다.
이 로더는 바닥에 떨어지는 무거운 상자처럼 구르는 3 개의 사각형으로 구성됩니다.CSS 애니메이션 : 제곱 로더
주요 부분은 끝났지 만이 애니메이션은 조금 까다 롭습니다. 애니메이션이 시작되면 사각형은 함께 크기를 조정하고 회전을 멈추고 결국에는 완전히 축소되도록 축소해야합니다.
여기에 코드 펜 : http://codepen.io/jadw/pen/yVrPJz. 여기
코드 :
.loader {
height: 20vw;
width: 20vw;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loader::after {
content: "";
position: absolute;
z-index: -1;
top: 22%;
bottom: 0;
left: 0;
right: 0;
border-top: 2px dotted #ff0000;
margin-top: -7%;
}
.square {
position: absolute;
top: 0;
left: 0;
display: block;
bottom: 0.15vw;
width: 0.15vw;
height: 0.15vw;
background-color: transparent;
}
.square:nth-child(1) {
transform: scale(0.01, 0.01);
border: 0.35vw solid #000000;
animation-name: spin-scale-cube1;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: steps(6, 6);
animation-iteration-count: infinite;
z-index: 1;
}
.square:nth-child(2) {
border: 0.35vw solid #DCDA15;
animation-name: spin-scale-cube1;
animation-duration: 3s;
animation-delay: 0.08s;
animation-timing-function: steps(6, 6);
animation-iteration-count: infinite;
z-index: -1;
}
.square:nth-child(3) {
border: 0.35vw solid #00A2DE;
animation-name: spin-scale-cube1;
animation-duration: 3s;
animation-delay: 0.18s;
animation-timing-function: steps(5, 5);
animation-iteration-count: infinite;
z-index: 0;
}
.loader-text {
color: #000000;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 3vw;
margin-top: 27%;
}
.loader-text span {
margin: 0;
padding: 0;
width: 0.3vw;
display: inline-block;
visibility: hidden;
}
.loader-text span:nth-child(1) {
animation-name: blink-dot1;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: steps(4);
animation-iteration-count: infinite;
}
.loader-text span:nth-child(2) {
animation-name: blink-dot2;
animation-duration: 3s;
animation-delay: 0.1s;
animation-timing-function: steps(4);
animation-iteration-count: infinite;
}
.loader-text span:nth-child(3) {
animation-name: blink-dot3;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: steps(4);
animation-iteration-count: infinite;
}
.ground {
border-bottom: 2px solid #ff0000;
}
@keyframes spin-scale-cube1 {
0% {
width: 0vw;
height: 0vw;
transform: translate(0vw, 0) rotate(0deg);
transform-origin: bottom right;
}
1% {
bottom: 1vw;
width: 1vw;
height: 1vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
2% {
bottom: 1.5vw;
width: 1.5vw;
height: 1.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
3% {
bottom: 2vw;
width: 2vw;
height: 2vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
4%,
10% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
20% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(90deg);
}
20.01% {
transform: translate(3.2vw, 0) rotate(0deg);
}
40% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(3.2vw, 0) rotate(90deg);
}
40.01% {
transform: translate(6.4vw, 0) rotate(0deg);
}
60% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(6.4vw, 0) rotate(90deg);
}
60.01% {
transform: translate(9.6vw, 0) rotate(0deg);
}
80% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(9.6vw, 0) rotate(90deg);
}
80.01% {
transform: translate(12.8vw, 0) rotate(0deg);
}
90% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(12.8vw, 0) rotate(0deg);
}
90.01% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
91% {
bottom: 1.5vw;
width: 1.5vw;
height: 1.5vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
93% {
bottom: 1vw;
width: 1vw;
height: 1vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
95% {
bottom: 0.5vw;
width: 0.5vw;
height: 0.5vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
97% {
bottom: 0vw;
width: 0vw;
height: 0vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
100% {
bottom: 0vw;
width: 0vw;
height: 0vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
}
@keyframes spin-scale-cube2 {
0% {
width: 0vw;
height: 0vw;
transform: translate(0vw, 0) rotate(0deg);
transform-origin: bottom right;
}
1% {
bottom: 1vw;
width: 1vw;
height: 1vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
2% {
bottom: 1.5vw;
width: 1.5vw;
height: 1.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
3% {
bottom: 2vw;
width: 2vw;
height: 2vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
4%,
10% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
20% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(90deg);
}
20.01% {
transform: translate(3.2vw, 0) rotate(0deg);
}
40% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(3.2vw, 0) rotate(90deg);
}
40.01% {
transform: translate(6.4vw, 0) rotate(0deg);
}
60% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(6.4vw, 0) rotate(90deg);
}
60.01% {
transform: translate(9.6vw, 0) rotate(0deg);
}
80% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(9.6vw, 0) rotate(90deg);
}
80.01% {
transform: translate(12.8vw, 0) rotate(0deg);
}
90% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(12.8vw, 0) rotate(0deg);
}
90.01% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
91% {
bottom: 1.5vw;
width: 1.5vw;
height: 1.5vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
93% {
bottom: 1vw;
width: 1vw;
height: 1vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
95% {
bottom: 0.5vw;
width: 0.5vw;
height: 0.5vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
97% {
bottom: 0vw;
width: 0vw;
height: 0vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
100% {
bottom: 0vw;
width: 0vw;
height: 0vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
}
@keyframes spin-scale-cube3 {
0% {
width: 0vw;
height: 0vw;
transform: translate(0vw, 0) rotate(0deg);
transform-origin: bottom right;
}
1% {
bottom: 1vw;
width: 1vw;
height: 1vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
2% {
bottom: 1.5vw;
width: 1.5vw;
height: 1.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
3% {
bottom: 2vw;
width: 2vw;
height: 2vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
4%,
10% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
20% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(90deg);
}
20.01% {
transform: translate(3.2vw, 0) rotate(0deg);
}
40% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(3.2vw, 0) rotate(90deg);
}
40.01% {
transform: translate(6.4vw, 0) rotate(0deg);
}
60% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(6.4vw, 0) rotate(90deg);
}
60.01% {
transform: translate(9.6vw, 0) rotate(0deg);
}
80% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(9.6vw, 0) rotate(90deg);
}
80.01% {
transform: translate(12.8vw, 0) rotate(0deg);
}
85% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(12.8vw, 0) rotate(0deg);
}
90.01% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
91% {
bottom: 1.5vw;
width: 1.5vw;
height: 1.5vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
93% {
bottom: 1vw;
width: 1vw;
height: 1vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
95% {
bottom: 0.5vw;
width: 0.5vw;
height: 0.5vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
97% {
bottom: 0vw;
width: 0vw;
height: 0vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
100% {
bottom: 0vw;
width: 0vw;
height: 0vw;
transform-origin: bottom right;
transform: translate(16vw, 0) rotate(0deg);
}
}
@keyframes blink-dot1 {
0%,
18% {
visibility: hidden;
}
19% {
visibility: hidden;
}
20% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
@keyframes blink-dot2 {
0%,
50% {
visibility: hidden;
}
51% {
visibility: hidden;
}
52% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
@keyframes blink-dot3 {
0%,
73% {
visibility: hidden;
}
74% {
visibility: hidden;
}
75% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
<div class="loader">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="loader-text">Loading
<span>.</span>
<span>.</span>
<span>.</span>
</div>
</div>
어떻게 사각형이 동시에 확장 할 때 애니메이션이 시작 때 애니메이션 마감을 확장 할 수 있도록?
귀하의 질문은 약간 불분명하다. 제발 좀 더 자세히 설명해주세요. –
키 프레임 세트'spin-scale-cube1','spin-scale-cube2','spin-scale-cube3'을 정의하지만, 모든 3 박스에 대해서만'spin-scale-cube1'을 사용합니다. 나는 당신이 그걸 처음보아야한다고 생각합니다. –
@adwjo 자신의 CSS 규칙을 다시 살펴보십시오. 당신의 선언 중 어떤 것도'spin-scale-cube2' 나'spin-scale-cube3'을 사용하지 않습니다. '.square : nth-child (1)'에서'(2)'와'(3)'에'animation-name : spin-scale-cube1' 선언을 복사/그에 따라 숫자를 조정하는 것을 잊었다. –