初級記事：CSS3を使ってラブローディングを作成する方法（詳細コード解説）-CSSチュートリアル-php.cn

初級記事：CSS3を使ってラブローディングを作成する方法（詳細コード解説）

奋力向前

リリース： 2021-09-16 17:58:32

オリジナル

3073 人が閲覧しました

前回の記事「CSSを使用してリアルな水の波紋エフェクトを作成する方法をステップごとに教えます(コード付き)」では、CSSを使用してリアルな水の波紋エフェクトを作成する方法を紹介しました。水の波紋効果。 CSS3を使用してラブローディングを作成する方法を次の記事で紹介しますので、一緒に見ていきましょう。

初級記事：CSS3を使ってラブローディングを作成する方法（詳細コード解説）

Web ページにはこのような CSS3 愛のロードがよくあります。それを共有しましょう。レンダリングを確認した後、それを実現する方法を検討しましょう。 HTML CSS画像テキストレイアウトの基本的な処理を説明します。

効果は次のようになります

初級記事：CSS3を使ってラブローディングを作成する方法（詳細コード解説）

1. まず、新しい HTML ファイルを作成し、9 個の div タグを定義します。

<div class="header-0"></div>
            <div class="header-1"></div>
            <div class="header-2"></div>
            <div class="header-3"></div>
            <div class="header-4"></div>
            <div class="header-5"></div>
            <div class="header-6"></div>
            <div class="header-7"></div>
            <div class="header-8"></div>

ログイン後にコピー

2. 変更する CSS スタイルの定義を開始し、background-color 属性を追加して背景色を設定し、幅を 100% に設定し、高さを 100% に設定します。 margin プロパティは、すべてのマージンプロパティを設定します。

body {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: #ccc;
    }

ログイン後にコピー

3. コンテナタイトルのテキストスタイル。align-items 属性を使用して中央揃えにします。

  .container {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;

ログイン後にコピー

4. ヘッダータイトルのテキストスタイル。position 属性を使用して要素の位置を指定します。

.header {
        position: relative;
        width: 138px;
        /* display: flex; */

ログイン後にコピー

5.class*='header-'title テキストスタイル。要素の位置を指定するには position 属性を使用します。構文は「position:Absolute;top:-5px」です。 ;border-radius: 5px" は、絶対位置の要素を生成します。

 [class*=&#39;header-&#39;]{
        position: absolute;
        width: 10px;
        height: 10px;
        top: -5px;
        border-radius: 5px;
     }

ログイン後にコピー

6. Header0-8 のタイトルテキストスタイル、animation (アニメーション) 属性を使用して 8 要素ごとにバインドし、要素をスイングさせます。

 .header-0,
    .header-8 {
        animation: header-0 3.2s infinite;
    }
    .header-1,
    .header-7 {
        animation: header-1 3.2s infinite;
    }
    .header-2,
    .header-6 {
        animation: header-2 3.2s infinite;
    }
    .header-3,
    .header-5 {
        animation: header-3 3.2s infinite;
    }
    .header-4 {
        animation: header-4 3.2s infinite;
    }

ログイン後にコピー

7. 4 つの @keyframes ルールを使用して、作成した 4 つのアニメーションをオープニングアニメーションとして 0% から 100% まで徐々に変更します。

@keyframes header-0 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 30px;
        top: -10px;
    }
}
@keyframes header-1 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 60px;
        top: -31px;
    }
}
@keyframes header-2 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 80px;
        top: -37px;
    }
}
@keyframes header-3 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 90px;
        top: -31px;
    }
}
@keyframes header-4 {
    0%,
    10%,
    90%,
    100% {
        height: 10px;
        top: -5px;
    }
    45%,
    55% {
        height: 94px;
        top: -23px;
    }

ログイン後にコピー

8. animation-delay 属性を header0-8 のタイトルテキストスタイルに追加し、アニメーションを開始する前に 1 秒待ちます。background 属性は色を設定します。 8 つの要素をバインドします。

.header-0 {
    left: 0;
    animation-delay: 0s;
    background: #92fe9d;

}
.header-1 {
    left: 16px;
    animation-delay: 0.15s;
    background: #00c9ff;
}
.header-2 {
    left: 32px;
    animation-delay: 0.3s;
    background: #ff758c;
}
.header-3 {
    left: 48px;
    animation-delay: 0.45s;
    background: #ff7eb3;
}
.header-4 {
    left: 66px;
    animation-delay: 0.6s;
    background: #fa71cd;
}
.header-5 {
    left: 82px;
    animation-delay: 0.75s;
    background: #6f86d6;
}
.header-6 {
    left: 98px;
    animation-delay: 0.9s;
    background: #f9f586;
}

.header-7 {
    left: 114px;
    animation-delay: 1.05s;
    background: #b1f4cf;
}
.header-8 {
    left: 130px;
    animation-delay: 1.2s;
    background: #fef9d7;
}

ログイン後にコピー

コードの効果は出ています

初級記事：CSS3を使ってラブローディングを作成する方法（詳細コード解説）

完全なコードは以下です




    
    爱心加载
    



    
        
            <div class="header-0"></div>
            <div class="header-1"></div>
            <div class="header-2"></div>
            <div class="header-3"></div>
            <div class="header-4"></div>
            <div class="header-5"></div>
            <div class="header-6"></div>
            <div class="header-7"></div>
            <div class="header-8"></div>

ログイン後にコピー

推奨される学習: CSS ビデオチュートリアル

以上が初級記事：CSS3を使ってラブローディングを作成する方法（詳細コード解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。