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'（ONE！それに応じて数を調整するのを忘れてしまった。 –