非常にクールな CSS3 読み込みアニメーション効果-CSSチュートリアル-php.cn

非常にクールな CSS3 読み込みアニメーション効果

黄舟

リリース： 2017-01-19 14:05:57

オリジナル

1940 人が閲覧しました

簡単なチュートリアル

これは非常にクールな CSS3 読み込みアニメーション効果です。読み込みアニメーションは CSS3 CSS3 アニメーションを使用して作成されており、コードはシンプルで、効果は非常にクールです。

HTML 構造の使用方法

2 つの子要素を持つ

要素を読み込みアニメーションのコンテナとして使用します。このうち、div.loading-1 は読み込みの進行状況バーです。 div.loading-2 は読み込みテキストです。

<div class="loader">
    <div class="loading-1"></div>
    <div class="loading-2">Loading...</div>
</div>

ログイン後にコピー

CSS スタイル

この読み込みアニメーションでは 3 つのアニメーションが使用されています。最初の読み込みアニメーションは、プログレスバーを 0 から 100% に移動するために使用されます。 2 番目の回転アニメーションは、進行状況バーを Y 軸方向に回転させるために使用されます。 3 番目のバウンスアニメーションはテキストのバウンスに使用されます。

.loader {
    width: 150px;
    margin: 50px auto 70px;
    position: relative;
}
.loader .loading-1 {
    position: relative;
    width: 100%;
    height: 10px;
    border: 1px solid #69d2e7;
    border-radius: 10px;
    animation: turn 4s linear 1.75s infinite;
}
.loader .loading-1:before {
    content: "";
    display: block;
    position: absolute;
    width: 0%;
    height: 100%;
    background: #69d2e7;
    box-shadow: 10px 0px 15px 0px #69d2e7;
    animation: load 2s linear infinite;
}
.loader .loading-2 {
    width: 100%;
    position: absolute;
    top: 10px;
    color: #69d2e7;
    font-size: 22px;
    text-align: center;
    animation: bounce 2s  linear infinite;
}
@keyframes load {
    0% {
        width: 0%;
    }
    87.5%, 100% {
        width: 100%;
    }
}
@keyframes turn {
    0% {
        transform: rotateY(0deg);
    }
    6.25%, 50% {
        transform: rotateY(180deg);
    }
    56.25%, 100% {
        transform: rotateY(360deg);
    }
}
@keyframes bounce {
    0%,100% {
        top: 10px;
    }
    12.5% {
        top: 30px;
    }
}

ログイン後にコピー

上記は、非常にクールな CSS3 読み込みアニメーション効果の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。