「テンプレート:テスト2/style.css」の版間の差分

提供:WikiWiki
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
1行目: 1行目:
.gradation {
.loading {
  animation: grad linear infinite alternate;
    position: absolute;
  animation-duration: 1s;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    border: 3px solid #fafafa;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}
}
@keyframes grad{
@keyframes spin {
0%{
    0% {
background:linear-gradient(0deg, blue 50%, pink)
        transform: translateY(-50%) rotate(0deg);
}
    }
10%{
 
background:linear-gradient(36deg, blue 50%, pink)
    25% {
}
        transform: translateY(-50%) rotate(60deg);
20%{
    }
background:linear-gradient(72deg, blue 50%, pink)
 
}
    50% {
30%{
        transform: translateY(-50%) rotate(180deg);
background:linear-gradient(108deg, blue 50%, pink)
    }
}
 
40%{
    75% {
background:linear-gradient(144deg, blue 50%, pink)
        transform: translateY(-50%) rotate(300deg);
}
    }
50%{
 
background:linear-gradient(180deg, blue 50%, pink)
    100% {
}
        transform: translateY(-50%) rotate(360deg);
60%{
    }
background:linear-gradient(216deg, blue 50%, pink)
}
70%{
background:linear-gradient(252deg, blue 50%, pink)
}
80%{
background:linear-gradient(288deg, blue 50%, pink)
}
90%{
background:linear-gradient(324deg, blue 50%, pink)
}
100%{
background:linear-gradient(360deg, blue 50%, pink)
}
}
}

2年3月30日 (ヰ) 20:26時点における版

.loading {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    border: 3px solid #fafafa;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    25% {
        transform: translateY(-50%) rotate(60deg);
    }

    50% {
        transform: translateY(-50%) rotate(180deg);
    }

    75% {
        transform: translateY(-50%) rotate(300deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}