我需要做一个加载器。
这个装载机由三个方 block 组成，它们像掉在地上的重箱子一样滚动。
主要部分已经完成，但这个动画有点棘手:当动画开始时，正方形必须一起缩放，停止然后滚动，最后，正方形需要缩小以同时完全消失。
CodePen 在这里: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>
如何让正方形在动画开始的同时放大，在动画结束的同时缩小？
最佳答案
我的“问题”解决了。
当动画开始时(步长为 0%)，您必须将正方形平移到 y 轴上的 2.5vw(正方形的宽度和高度)。 当动画结束时(步长为 100%)，您必须将正方形平移到 x 轴上的 14.05vw(任意值)和 y 轴上的 2.5vw。
这些更改会生成该代码:
.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-origin: bottom right;
border: 0.35vw solid #000000;
animation-name: spin-scale-cube1;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: ease;
animation-iteration-count: infinite;
z-index: 1;
}
.square:nth-child(2) {
border: 0.35vw solid #DCDA15;
animation-name: spin-scale-cube2;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
z-index: 0;
}
.square:nth-child(3) {
border: 0.35vw solid #00A2DE;
animation-name: spin-scale-cube3;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
z-index: -1;
}
.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: ease;
animation-iteration-count: infinite;
}
.loader-text span:nth-child(2) {
animation-name: blink-dot2;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.loader-text span:nth-child(3) {
animation-name: blink-dot3;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.ground {
border-bottom: 2px solid #ff0000;
}
@keyframes spin-scale-cube1 {
0% {
bottom: 2.5vw;
width: 0vw;
height: 0vw;
transform-origin: bottom center;
transform: translate(0vw, 2.5vw) 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);
}
94% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(12.8vw, 0) rotate(0deg);
}
94.01% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(12.8vw, 0) rotate(0deg);
}
100% {
bottom: 0vw;
width: 0vw;
height: 0vw;
transform-origin: bottom right;
transform: translate(14.05vw, 2.5vw) rotate(0deg);
}
}
@keyframes spin-scale-cube2 {
0% {
width: 0vw;
height: 0vw;
transform: translate(0vw, 2.5vw) rotate(0deg);
transform-origin: bottom right;
}
4%,
13% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
23% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(90deg);
}
23.01% {
transform: translate(3.2vw, 0) rotate(0deg);
}
43% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(3.2vw, 0) rotate(90deg);
}
43.01% {
transform: translate(6.4vw, 0) rotate(0deg);
}
63% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(6.4vw, 0) rotate(90deg);
}
63.01% {
transform: translate(9.6vw, 0) rotate(0deg);
}
83% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(9.6vw, 0) rotate(90deg);
}
83.01% {
transform: translate(12.8vw, 0) rotate(0deg);
}
94% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(12.8vw, 0) rotate(0deg);
}
94.01% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(12.8vw, 0) rotate(0deg);
}
100% {
bottom: 0vw;
width: 0vw;
height: 0vw;
transform-origin: bottom right;
transform: translate(14.05vw, 2.5vw) rotate(0deg);
}
}
@keyframes spin-scale-cube3 {
0% {
width: 0vw;
height: 0vw;
transform: translate(0vw, 2.5vw) rotate(0deg);
transform-origin: bottom right;
}
4%,
18% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(0deg);
}
28% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(0vw, 0) rotate(90deg);
}
28.01% {
transform: translate(3.2vw, 0) rotate(0deg);
}
48% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(3.2vw, 0) rotate(90deg);
}
48.01% {
transform: translate(6.4vw, 0) rotate(0deg);
}
68% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(6.4vw, 0) rotate(90deg);
}
68.01% {
transform: translate(9.6vw, 0) rotate(0deg);
}
88% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(9.6vw, 0) rotate(90deg);
}
88.01% {
transform: translate(12.8vw, 0) rotate(0deg);
}
94% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(12.8vw, 0) rotate(0deg);
}
94.01% {
bottom: 2.5vw;
width: 2.5vw;
height: 2.5vw;
transform-origin: bottom right;
transform: translate(12.8vw, 0) rotate(0deg);
}
100% {
bottom: 0vw;
width: 0vw;
height: 0vw;
transform-origin: bottom right;
transform: translate(14.05vw, 2.5vw) rotate(0deg);
}
}
@keyframes blink-dot1 {
0%,
10% {
visibility: hidden;
}
20.01% {
visibility: visible;
}
40% {
visibility: visible;
}
60% {
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;
}
}
关于html - CSS 动画 : squares loader，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41348114/